代码之家 › 专栏 › 技术社区 › sanholo

读取输入值时控制台中出现未捕获类型错误

javascript

sanholo · 技术社区 · 1 年前

在以下代码中:

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() 执行良好,而放回会导致它无法执行,所以问题出在它身上。这是什么原因,我该如何解决?

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

未捕获类型错误:无法在HTMLButtonElement.onclick的TRANSACT处读取null的属性“value”

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

0 回复 | 直到 8 年前

T.J. Crowder 8 年前

Uncaught TypeError: Cannot read property 'value' of null

这告诉您,当代码运行时,这些元素中至少有一个不存在,因此 getElementById 退货 null ,你正试图阅读 value 财产从。

getElementById 将只有返回 无效的 如果在您调用文档时,文档中不存在具有给定ID的元素。一般来说,元素不存在的原因分为以下几类:

打电话 getElementById 太早了
错过了 id (例如,拼写错误)
使用a name 而不是a 身份证件
元素存在,但不在文档中 (罕见)

在你的例子中,由于这是点击按钮,它可能是#2或#3。通过查看错误标识的行,或者使用浏览器的调试器逐语句遍历代码,您可以看到它对哪个ID不满意。

让我们看看每个类别:

1.呼叫 `getElementById` 太早了

一个常见的错误是进行代码调用 getElementById 在一个 script 阻止那之前 HTML中的元素,如下所示:

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

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

解决 :

移动 脚本 到HTML的末尾,就在结束之前 </body. 标签
请致电 getElementById 在回调中,例如在 DOMContentLoaded 事件或按钮点击等。

不要使用 window.onload 或 <body onload="..."> 除非你真的想等到 全部的 外部资源(包括所有图像)已加载。

2.拼写错误 `身份证件`

这真的很常见,使用 getElementById("ofo") 当元素定义为 id="foo" .

例子:

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

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

3.使用a `名称` 而不是a `身份证件`

getElementById("foo") 查找具有以下内容的元素 id=“foo” , 不具有 name="foo" . 名称 != 身份证件 .

例子:

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

解决方案 :使用 身份证件 ,不 名称 .:-)(或使用以下命令查找元素 document.querySelector('[name="foo"]') .)

4.元素存在,但不在文档中

getElementById 看 在文件中 对于元素。因此,如果元素已经创建 ,但未添加到文档中的任何位置,它将找不到它。

例子:

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

它不会查看整个内存,它只会查看文档(特别是您调用它的文档;例如,不同的框架有不同的文档)。

解决方案: 确保元素在文档中;也许你在创建后忘了附加它?(但在上面的例子中,你已经有了对它的引用,所以你不需要 getElementById )

读取输入值时控制台中出现未捕获类型错误

1.呼叫 getElementById 太早了

2.拼写错误 身份证件

3.使用a 名称 而不是a 身份证件

4.元素存在,但不在文档中

1.呼叫 `getElementById` 太早了

2.拼写错误 `身份证件`

3.使用a `名称` 而不是a `身份证件`