如何在Javascript中使用输入修复“无法读取属性”值为“null”“

31moq8wy 于 2023-01-24 发布在 Java

关注(0)|答案(5)|浏览(171)

我想在控制台中显示an的值，但当我尝试使用console.log记录该值时，它说无法读取'null'值
我曾尝试在我的HTML文件中使用，但它不太工作
下面是我的代码：

var grayscale = document.getElementById('grayscale');
console.log(grayscale.value)

grayscale.onchange = function(){
    console.log(grayscale.value)
}

<input type='range' id='grayscale' min='0' max='100'>

它表明

Uncaught TypeError: Cannot read property 'value' of null
    at main.js:3

JavaScript

来源：https://stackoverflow.com/questions/54611810/how-to-fix-cannot-read-property-value-of-null-with-an-input-in-javascript

5条答案

按热度按时间

3pvhb19x1#

您的JavaScript在DOM准备就绪之前正在运行。请尝试将其 Package 在事件侦听器中，如下所示：

document.addEventListener("DOMContentLoaded", function(event) { 
  var grayscale = document.getElementById('grayscale');
  console.log(grayscale.value)

  grayscale.onchange = function(){
    console.log(grayscale.value)
  }
}

赞(0）回复(0）举报 2023-01-24

eit6fx6z2#

使用window.onload并调用一个函数，它会执行你想要的所有任务。它会等到窗口加载，然后你的函数才会被执行。现在它在html被呈现之前被执行，意味着它甚至在加载之前就访问了滑块的值。所以你会得到这个错误。

window.onload=function(){var grayscale = document.getElementById('grayscale');
console.log(grayscale.value)

grayscale.onchange = function(){
    console.log(grayscale.value)
}
}

<input type='range' id='grayscale' min='0' max='100'>

赞(0）回复(0）举报 2023-01-24

c2e8gylq3#

把Javascript放在元素后面。如果grayscale为null，它还不是DOM的一部分。把Javascript文件或代码段放在body部分元素后面的最后。

<html>
  ....
  <body>
     ....
     <script type="text/javascript" src="theJs.js"></script>
  </body>
</html>

或者您可以使用嵌入式javascript：

<input type='range' id='grayscale' min='0' max='100'>
<script>
var grayscale = document.getElementById('grayscale');
console.log(grayscale.value)

grayscale.onchange = function(){
    console.log(grayscale.value)
}
</script>

</body>

赞(0）回复(0）举报 2023-01-24

o2rvlv0m4#

试试这个：

const grayscale = document.getElementById('grayscale');

grayscale.addEventListener('change', ({target}) => console.log(target.value));

ps：忘了提，启动脚本时，设置属性defer，如下：

<script defer src="./index.js"></script>

赞(0）回复(0）举报 2023-01-24

e4yzc0pl5#

分析语句通常不适用于null，尤其是在不太宽松的JavaScript框架中。你只需要在前面添加一个否定符（！）就可以了。
设变量=空

if(!variable) {
console.log("computing")
  }

或者你可能犯了一个常见的错误，比你应该做的更深一步。

赞(0）回复(0）举报 2023-01-24

我来回答

如何在Javascript中使用输入修复“无法读取属性”值为“null”“

5条答案

相关问题

热门标签

最新问答