开发者问题收集

未捕获的类型错误：调用 getElementById() 后无法读取 null 的属性“appendChild”

2016-06-17
247
javascript null getelementbyid

我刚刚开始学习 JavaScript（正确：D），我很难处理上述错误。我使用的浏览器是 Debian Jessie 64 位系统上的最新 Google Chrome 。代码嵌入在我的页面的 <script/> 标记内： 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
    <head/>

    <body bgcolor="white">
        <p><u>Counter:</u></p>
        <div id="counter"/>
        <p><u>Temperature conversion:</u></p>
        <div id="temperature"/>
        <script type="text/javascript">
            function printRange(_from, _to) {
                // ...
            }

            function fahrenheitToCelsius(fahrenheits) {
                return 5/9 * (fahrenheits - 32);
            }

            document.getElementById("counter").innerHTML = printRange(2,-10); // (1)

            var fahrenheits = prompt("Enter Fahreheit degrees", 50);
            var celsius = fahrenheitToCelsius(fahrenheits);
            var para = document.createElement("p");
            para.textContent = fahrenheits + "F = " + celsius + "oC";
            document.getElementById("temperature").appendChild(para); // (2)
        </script>
    </body>
</html>

document.getElementById("counter") （标记为 1 ）工作正常，但上述错误发生在 document.getElementById("temperature") （标记为 2 ），即使两个 <div/> 基本上是一个接一个的，并且都出现在引用它们的 <script/> 标记之前。我确实知道错误来自 document.getElementById("temperature") 返回 null ，但我不知道为什么脚本无法通过此函数调用找到给定的 ID。

2个回答

只有特定的元素子集可以在没有结束标记的情况下使用。这是 /> 的隐式用例。该子集称为 “void 元素” 。

由于 div 不是这些元素之一，您的 <div/> 标记将简单地呈现为 <div> ，而没有结束标记。第一个 document.getElementById("counter").innerHTML = printRange(2,-10); // (1) 会使用对 printRange 的调用结果彻底清除页面的其余部分。

正确关闭您的元素。 

<div id="counter"></div>
Travis J
2016-06-17

从技术上讲，HTML 4.x 不允许使用自闭合标签，但 XHTML 允许使用自闭合标签 - 您可以尝试不让 div 标签自闭合吗？

jsfiddle 

<div id="temperature"></div>
kirinthos
2016-06-17