JS新手求助：为何出现‘Unable to get property 'value' of undefined or null reference’错误？

嘿，我来帮你拆解下问题出在哪，以及怎么解决～

核心问题原因 #

你遇到的「无法获取null的value属性」错误，根源在于JS代码执行时机不对：
你的<script src="exerciseJavascript.js"></script>放在了<head>标签里，浏览器是从上到下解析HTML的——当JS执行第一行var x = document.querySelector("#hello").value;时，<body>里的<input id="hello">还没被浏览器渲染出来，document.querySelector("#hello")返回的是null，自然就会触发报错。

另外还有个小坑：就算解决了上面的问题，你定义的x只会获取一次input的初始值（也就是2），之后用户修改input内容，x不会自动更新，putInConsole()每次打印的还是最初的2，不是最新输入值。

解决方案（两种可选） #

方案1：把JS脚本移到<body>末尾

这是最简单的方式，让浏览器先渲染完所有页面元素，再执行JS代码，就能顺利找到input元素了。同时调整JS逻辑，每次调用函数时获取最新的输入值：

修改后的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>
<title>Document</title>
</head>
<body>
<input id="hello" type="number" value=2 oninput="putInConsole();">
<!-- 把JS脚本移到body末尾 -->
<script src="exerciseJavascript.js"></script>
</body>
</html>

修改后的exerciseJavascript.js代码：

function putInConsole(){
  // 每次调用函数时，实时获取input的最新值
  var x = document.querySelector("#hello").value;
  console.log(x);
}

方案2：用DOMContentLoaded事件监听（不移动脚本位置）

如果不想调整脚本位置，可以在JS里监听页面DOM加载完成的事件，确保操作DOM的代码在元素渲染后执行，同样要在函数内获取最新值：

exerciseJavascript.js代码：

function putInConsole(){
  var x = document.querySelector("#hello").value;
  console.log(x);
}

// 等页面所有DOM元素加载完成后，再执行需要操作DOM的代码
document.addEventListener('DOMContentLoaded', function() {
  // 如果有初始化DOM相关的逻辑，放在这里
});

内容的提问来源于stack exchange，提问作者Mauamadou Drammeh