未捕获的类型错误:不能读取属性'元素不存在

Uncaught TypeError: Cannot read property 'value' of null, Element does exist

本文关键字：属性 读取 不存在 元素 不能读 不能 类型 错误      更新时间：2023-09-26

在你拒绝投票之前，我读了很多问题，但它没有帮助我。我的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小时。这里出了什么问题?

将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>

你可以做的另一件事是将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>

脚本应该在输入被添加到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准备好，而不是等待所有图像加载。而且，这适用于所有浏览器。

你的脚本应该在html之后

相关文章：