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

我刚刚开始学习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。

只有一定的子集，您无需关闭标签即可使用。这是/>的隐式用例。子集被称为" void元素"。

由于div不是这些元素之一，因此您的<div/>标签简单地呈现为<div>，而无需关闭标签。第一个document.getElementById("counter").innerHTML = printRange(2,-10); // (1)即将删除页面的其余部分，并带有调用printrange的结果。

正确关闭元素。

<div id="counter"></div>

在技术上自插的标签在html 4.x中不允许，但在xhtml中允许 - 您能否尝试不自行切割DIV标签？

jsfiddle

<div id="temperature"></div>

相关内容

最新更新

热门标签：