2

好的。我需要新鲜的眼睛，因为我仍然在这个 s***d 问题上一个小时！

这是我的简单 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

有人明白吗？我知道这不是寻找调试帮助的正确地方，但如果我得不到它，我会发疯的！所以请，有什么帮助吗？

提前说。

4

4 回答 4

5

这样做的原因是头部中的脚本在页面呈现之前加载。这意味着您的内容尚未呈现，因此不是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 的方式。

于 2012-09-09T16:41:31.027 回答
2

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

您可以将脚本标记向下移动到</body>标记之前的右侧，也可以等待 DOM 加载，然后使用窗口 onload 事件或 DOMReady 事件运行代码。

于 2012-09-09T16:41:30.497 回答
1

这里有两个错误。首先，您需要将 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>
于 2012-09-09T16:44:44.210 回答
0

你可以使用这样的东西 

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

于 2012-09-09T16:45:45.163 回答