未捕获的TypeError:调用getElementById()后无法读取null的属性'appendChild'

rba*_*dar 2 javascript null getelementbyid

我刚开始学习JavaScript(正确:D),我很难处理上面提到的错误.我正在使用的浏览器是Google ChromeDebian Jessie 64bit系统的最新版本.代码嵌入在<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>
Run Code Online (Sandbox Code Playgroud)

document.getElementById("counter")(标有1处发生时)工作正常,不过提到的错误document.getElementById("temperature")(标有2)即使两者<div/>s为基本上一个在另一个之后和之前都出现<script/>其中这些被引用标记.我确实理解错误来自document.getElementById("temperature")返回,null但我没有得到最简单的想法为什么脚本无法通过此函数调用找到给定的ID.

Tra*_*s J 5

在没有结束标记的情况下,只能使用某些元素子集.这是隐含的用例/>.该子集称为"空元素".

由于div不是这些元素之一,您的<div/>标记只是呈现为<div>没有结束标记.第一个document.getElementById("counter").innerHTML = printRange(2,-10); // (1)简要地删除了页面的其余部分,其中包含对printRange的调用结果.

正确关闭你的元素.

<div id="counter"></div>
Run Code Online (Sandbox Code Playgroud)