Question

未捕获的类型错误：无法读取 null 的属性“value”，元素确实存在

2015-09-24

16804

javascript

在您投反对票之前，我已经阅读了很多问题，但对我没有帮助。即使输入类型中有值，我的 Javascript 的 alert 也会返回 null。

这是代码：-

<script>
if (document.getElementById('p0002') != null) {
    var str = document.getElementById("p0002").value;
}
else {
    var str = null;
}
alert(str);
</script>

 <input type="hidden" name="p0002" id="p0002" value="1" >
 <input type="hidden" name="p0003" id="p0003" value="0" >
 <input type="hidden" name="p0004" id="p0004" value="2" >

它总是返回 null 。控制台中的错误显示：

Uncaught TypeError: Cannot read property 'value' of null

自过去 1 小时以来一直在尝试修复它。这里出了什么问题？

Answer 1

将您的 JavaScript 包装在 window.onload 中。目前，您的 JavaScript 正在元素存在之前执行：

<script>
window.onload = function () {
    if (document.getElementById('p0002') != null) {
        var str = document.getElementById("p0002").value;
    }
    else {
        var str = null;
    }
    alert(str);
}
</script>

您可以做的另一件事是将脚本标记移到您引用的元素之后：

<input type="hidden" name="p0002" id="p0002" value="1" >
<input type="hidden" name="p0003" id="p0003" value="0" >
<input type="hidden" name="p0004" id="p0004" value="2" >
<script>
if (document.getElementById('p0002') != null) {
    var str = document.getElementById("p0002").value;
}
else {
    var str = null;
}
alert(str);
</script>

Answer 2

您的脚本应在输入添加到 DOM 后执行。使脚本正常工作的最跨浏览器方法是将其移动到 <body> 标签关闭之前，并将其包装到立即函数中：

<script>
(function() {
   if (document.getElementById('p0002') != null) {
       var str = document.getElementById("p0002").value;
   } else {
       var str = null;
   }
       alert(str);
 })();
</script>
</body>

这比 onload 处理程序执行速度更快，因为它只等待 DOM 准备就绪，而不是等待所有图像加载。而且，这适用于每个浏览器。

Answer 3

此处您的脚本应位于 html 之后。

Harsh Makani

2015-09-24