为什么这段代码不起作用？Javascript和HTML。请查看详情。

Question

为什么这段代码不起作用？Javascript和HTML。请查看详情。

3

这是我的HTML文件。

   <body>
            <header>
                <h3 id = "TestID"> Test </h3>
            </header>
        </body>

        <script src = "MessagingPage.js"></script>

这是我的JS文件

document.getElementById("TestID").addEventListener("load", function(){
this.innerHTML("Hi");
})

document.write("Hello World");

现在，当我加载HTML时，在浏览器中会显示"Test"。然而，应该显示的是"Hi"。我不明白为什么会这样。请帮助我理解一下，因为我刚刚开始学习，请用简单易懂的语言解释一下。谢谢您阅读我的问题 :)

- NotKnock

2个回答

0

将脚本包含在<body>内，并更新JS文件，问题就会得到解决。

下面是可用的代码示例：

更新后的HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Demo</title>
  </head>
  <body>
    <header>
      <h3 id = "TestID"> Test </h3>
    </header>
    <script src = "/MessagingPage.js"></script>
  </body>
</html>

更新后的JS代码：

// MessagingPage.js
document.getElementById("TestID").innerHTML = "Hi"
document.write("Hello World");

输出：

- Gopinath

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

你有两个问题。

只有加载外部内容的元素（如iframe或img）才有load事件。

h3没有加载任何外部内容，因此没有load事件。

也许你应该将事件处理程序绑定到window。

innerHTML是一个字符串，不是函数。

addEventListener("load", function() {
  document.getElementById("TestID").innerHTML = "Hi";
})

document.write("Hello World");

  <header>
    <h3 id="TestID"> Test </h3>
  </header>

<script src="MessagingPage.js"></script>