开发者问题收集

为什么使用 getElementById 时会出现“TypeError：无法读取 null 的属性‘value’”？

2016-11-08
22482
javascript function

在以下代码中： 

function Transact() {
    if(document.getElementById('itctobuy').value!='') {
        itctobuy = parseInt(document.getElementById('itctobuy').value);
    }
    if(document.getElementById('steamtobuy').value!='') {
        steamtobuy = parseInt(document.getElementById('steamtobuy').value);
    }
    if(document.getElementById('reltobuy').value!='') {
        reltobuy = parseInt(document.getElementById('reltobuy').value);
    }
    if(document.getElementById('airtobuy').value!='') {
        airtobuy = parseInt(document.getElementById('airtobuy').value);
    }
    if(document.getElementById('bsnltobuy').value!='') {
        bsnltobuy = parseInt(document.getElementById('bsnltobuy').value);
    }
    updateValues();
}

该函数通过按钮的简单 onclick 执行。有 5 个 textarea 元素，用户可以在其中输入数字，单击按钮时，如果 textarea 值不为空，则值应存储在这些变量中（尽管即使不存在空条件，它也不会起作用）。
如果我删除整个块， updateValues() 会正常执行，而将其放回会导致它无法执行，所以问题就出在它身上。这是什么原因，我该如何解决这个问题？

编辑：控制台显示以下内容：

Uncaught TypeError: Cannot read property 'value' of null at TRANSACT at HTMLButtonElement.onclick

那么这个错误的原因是什么？当我输入所有文本字段并且它们的值不为空时，它不起作用。

1个回答

Uncaught TypeError: Cannot read property 'value' of null

这告诉您在代码运行时这些元素中至少有一个不存在，因此 getElementById 返回 null ，而您正尝试从中读取 value 属性。

getElementById 将 仅 在您调用它时文档中不存在具有给定 ID 的元素时才返回 null 。一般而言，元素不存在的原因分为以下几类：

  1. 过早调用 getElementById
  2. 拼写错误 id （例如，打字错误）
  3. 使用 name 而不是 id
  4. 元素存在，但不在文档中 （罕见）

对于您而言，由于这是在按钮单击时发生的，因此可能是 #2 或 #3。您可以通过查看错误标识的行或使用浏览器的调试器逐语句执行代码来查看它对哪个 ID 不满意。

让我们看看每个类别：

1.过早调用 getElementById

一个常见错误是将调用 getElementById 的代码放在 HTML 中元素 之前的 script 块中，如下所示： 

<script>
document.getElementById("foo").innerHTML = "bar";
</script>
<!-- ...and later... -->
<div id="foo"></div>

当该代码运行时，该元素不存在。

解决方案 ：

  • 将 script 移至 HTML 末尾，紧接着结束 </body. 标记
  • 将对 getElementById 的调用放在回调中，例如在 DOMContentLoaded 事件或按钮单击等中。

不要 使用 window.onload 或 <body onload="..."> ，除非您确实要等到 所有 外部资源（包括所有图像）都已加载后再运行代码。

2. id 拼写错误>

这非常常见，当元素定义为 id="foo" 时使用 getElementById("ofo") 。

示例： 

<div id="foo"></div>
<script>
document.getElementById("ofo").innerHTML = "I'm foo"; // Error
</script>

解决方案 ：使用正确的 ID。:-)

3. 使用 name 而不是 id

getElementById("foo") 查找具有 id="foo" 的元素， 而不是 具有 name="foo" 的元素。 name != id .

示例： 

<input name="foo" type="text">
<script>
document.getElementById("foo").value = "I'm foo"; // Error
</script>

解决方案 ：使用 id ，而不是 name 。:-)（或者使用 document.querySelector('[name="foo"]') 查找元素。）

4. 该元素存在，但不在文档中

getElementById 在 文档 中查找该元素。因此，如果元素已 创建 ，但尚未添加到文档中的任何地方，它将找不到它。

示例： 

var div = document.createElement("div");
div.id = "foo";
console.log(document.getElementById("foo")); // null

它不会在整个内存中查找，而只会在文档中查找（具体来说，就是调用它的文档；例如，不同的框架有不同的文档）。

解决方案： 确保元素在文档中；也许您在创建它后忘记附加它了？（但在上面的例子中，您已经有了对它的引用，所以您根本不需要 getElementById 。）

2016-11-08