Question

我正在尝试做一些简单的事情，例如将<p>标记中的文本从“ hello”更改为“再见：但我无法使其正常工作。”

这是我的html

<body>
    <div id="passwordBox">
        <!-- <div id="title">
            <span>PASSWORD GENERATOR</span>
        </div> -->
        <p id="password">Hello</p>
    </div>
</body>

这是我的js

document.getElementById('password').innerHTML = "goodbye";

我的js链接正确。我在那里的其他功能正常工作。所以我想知道问题是什么。我敢肯定，这只是我看不到的东西，但我无法弄清楚。

Answer 1

HTML执行自上而下进行。 HTML会在解析HTML文档时调用它找到的每个脚本。由于您将脚本放在“ head”中，因此脚本将立即被调用。调用脚本时，您的DOM尚未准备好，并且脚本访问DOM元素并返回null。因此，在您的DOM完全加载之后（即，正文之后或“”

之前）加载脚本

因此理想的代码应如下所示：

<html>
  <body>
    <div>
      <p id="password">Hello</p>
    </div>
  </body>
  <script>
    document.getElementByID("password").innerHTML="goodbye";
  </script>
</html>

或者您仍然可以从头开始加载脚本，而只需添加一个按钮以及事件监听器（onClick），该事件监听器在单击按钮时会调用JavaScript函数。

<!DOCTYPE html>
<html>
  <head>
    <script>
      function changeContent() {
        document.getElementById("demo").innerHTML="goodbye";
      }
    </script>
  </head>
  <body>
    <p id="password">Hello</p>
    <button onclick="changeContent()">Try it</button>
  </body>
</html>

我正在尝试动态更改div的文本，但是它不起作用

1 个答案: