Question

确定。我需要新鲜的眼睛，因为我仍然在这个问题上待了一个小时！

这是我的简单HTML代码（testssio.html），其中包含javascript脚本：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.html = "it finally works!";
    </script>
</head>
<body>
    <div id="ssio"></div>
</body>
</html>

但它不起作用！使用调试器，我得到：

Uncaught TypeError: Cannot set property 'html' of null          /testssio/:6

有人得到它吗？我知道这不是寻找调试帮助的正确位置，但如果我没有得到它，我会发疯的！那么，请帮忙吗？

提前Tahnks。

Answer 1

原因是在呈现页面之前头部加载了脚本。这意味着您的内容尚未呈现，因此不属于document。

如果您希望看到这项工作，请尝试将您的脚本移动到元素渲染下方，如下所示：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="ssio"></div>
<script type="text/javascript">
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "it finally works!";
</script>
</body>
</html>

更为标准化的方法是使用事件。许多人使用jQuery，但可以使用普通的js。这意味着改变你的脚本：

<script type="text/javascript">
  function WinLoad() {
    var ssio = document.getElementById('ssio');
    ssio.innerHTML = "It finally works!";
  }
  window.onload = WinLoad;
</script>

这样您仍然可以将其保留在<head>。

中

此外，使用.html来自jQuery。它通常用作.html(content)。如果您想使用普通的javascript版本，请使用.innerHTML = content。

我提到了jQuery，因为它是一个高度使用的API。这句话来自他们的网站：

jQuery是一个快速而简洁的JavaScript库，它简化了HTML文档遍历，事件处理，动画和Ajax交互，以实现快速Web开发。 jQuery旨在改变您编写JavaScript的方式。

Answer 2

您的代码在加载DOM之前运行得太早，因此document.getElementById()尚未找到文档中的元素。

您可以在</body>标记之前向下移动脚本标记，也可以在使用window onload事件或DOMReady事件运行代码之前等待DOM加载。

Answer 3

这里有两个错误。首先，您需要将SCRIPT标记放在元素后面。其次，它不是.html，而是.innerHTML。所以这是更正后的代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="ssio"></div>
        <script type="text/javascript">
        var ssio = document.getElementById('ssio');
        ssio.innerHTML = "it finally works!";
    </script>
</body>
</html>

Javascript：无法使用getElementById获取元素

3 个答案: