Question

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

Answer 1

在没有结束标记的情况下，只能使用某个元素子集。这是/>的隐含用例。该子集称为"void elements"。

由于div不是其中一个元素，因此您的<div/>代码只会呈现为<div>而没有结束标记。第一个document.getElementById("counter").innerHTML = printRange(2,-10); // (1)使用printRange调用的结果立即清除页面的其余部分。

正确关闭元素。

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

Answer 2

技术上自动关闭标签在HTML 4.x中是不允许的，但在XHTML中是允许的 - 你可以尝试不自动关闭div标签吗？

jsfiddle

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

未捕获的TypeError：无法读取属性＆quot; appendChild＆＃39;调用getElementById（）后返回null

2 个答案: