在以下代码中:
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()
执行正常,而放回它会导致它不被执行,所以问题就在于它。这是什么原因以及如何解决这个问题?
编辑:控制台说明如下:
未捕获的TypeError:在HTMLButtonElement.onclick上的TRANSACT中无法读取null的属性'value'
那么这个错误的原因是什么?当我输入所有文本字段并且它们的值不为空时,它不起作用。
答案 0 :(得分:4)
Uncaught TypeError: Cannot read property 'value' of null
这告诉您,至少有一个元素在代码运行时不存在,因此getElementById
会返回null
,您尝试阅读value
物业来自。
getElementById
将仅返回null
。一般而言,元素不存在的原因属于以下类别:
getElementById
id
(例如,拼写错误)name
代替id
在你的情况下,因为这是按钮点击,它可能是#2或#3。您可以通过查看错误标识的行或使用浏览器的调试器逐步执行代码语句来查看哪个ID不满意。
让我们看看每个类别:
getElementById
一个常见的错误是让代码在<{1}}块中调用getElementById
之前 HTML中的元素,如下所示:
script
该代码运行时该元素不存在。
<强>解决方案强>:
<script>
document.getElementById("foo").innerHTML = "bar";
</script>
<!-- ...and later... -->
<div id="foo"></div>
移至HTML的末尾,就在结束script
代码</body.
发送至getElementById
事件,或点击按钮等。 不要使用DOMContentLoaded
或window.onload
,除非你真的想等到所有外部资源(包括所有图片)之后再运行代码已装好。
<body onload="...">
当使用id
定义元素时,这很常见,使用getElementById("ofo")
。
示例:
id="foo"
解决方案:使用正确的ID。 : - )
<div id="foo"></div>
<script>
document.getElementById("ofo").innerHTML = "I'm foo"; // Error
</script>
代替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"]')
在文档中查找元素的。因此,如果元素已经创建,但尚未在任何地方添加到文档中,则无法找到它。
示例:
getElementById
它不会在整个内存中查找,它只是查看文档(具体而言,是您调用它的文档;例如,不同的框架具有不同的文档)。
解决方案:确保元素在文档中;也许你忘了在创建之后追加它? (但在上面的示例中,您已经有了对它的引用,因此您根本不需要var div = document.createElement("div");
div.id = "foo";
console.log(document.getElementById("foo")); // null
。)