使用getElementById时,为什么会出现“TypeError:无法读取null的属性值”?

时间:2016-11-08 14:50:08

标签: 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()执行正常,而放回它会导致它不被执行,所以问题就在于它。这是什么原因以及如何解决这个问题?

编辑:控制台说明如下:

  

未捕获的TypeError:在HTMLButtonElement.onclick上的TRANSACT中无法读取null的属性'value'

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

1 个答案:

答案 0 :(得分:4)

  

Uncaught TypeError: Cannot read property 'value' of null

这告诉您,至少有一个元素在代码运行时不存在,因此getElementById会返回null,您尝试阅读value物业来自。

如果在您调用文档时文档中不存在具有给定ID的元素,

getElementById返回null。一般而言,元素不存在的原因属于以下类别:

  1. 过早致电getElementById
  2. 拼错id (例如,拼写错误)
  3. 使用name代替id
  4. 该元素存在,但不在文档中 (罕见)
  5. 在你的情况下,因为这是按钮点击,它可能是#2或#3。您可以通过查看错误标识的行或使用浏览器的调试器逐步执行代码语句来查看哪个ID不满意。

    让我们看看每个类别:

    1。过早致电getElementById

    一个常见的错误是让代码在<{1}}块中调用getElementById 之前 HTML中的元素,如下所示:

    script

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

    <强>解决方案

    • <script> document.getElementById("foo").innerHTML = "bar"; </script> <!-- ...and later... --> <div id="foo"></div> 移至HTML的末尾,就在结束script代码
    • 之前
    • 将来电</body.发送至getElementById事件,或点击按钮等。

    不要使用DOMContentLoadedwindow.onload,除非你真的想等到所有外部资源(包括所有图片)之后再运行代码已装好。

    2。拼错了<body onload="...">

    当使用id定义元素时,这很常见,使用getElementById("ofo")

    示例:

    id="foo"

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

    3。使用<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查找元素。)

    4。该元素存在,但不在文档

    document.querySelector('[name="foo"]')在文档中查找元素的。因此,如果元素已经创建,但尚未在任何地方添加到文档中,则无法找到它。

    示例:

    getElementById

    它不会在整个内存中查找,它只是查看文档(具体而言,是您调用它的文档;例如,不同的框架具有不同的文档)。

    解决方案:确保元素在文档中;也许你忘了在创建之后追加它? (但在上面的示例中,您已经有了对它的引用,因此您根本不需要var div = document.createElement("div"); div.id = "foo"; console.log(document.getElementById("foo")); // null 。)