时间戳

首页 > 解决方案 > 我正在尝试动态更改我的 div 的文本，但它不起作用

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

问题描述

我正在尝试做一些简单的事情，例如将<p>标签中的文本从“你好”更改为“再见：但我无法让它工作。

这是我的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 在我的脑海中正确链接。我在那里的其他功能正常工作。所以我想知道问题是什么。我确定这很简单，我只是没有看到，但我无法弄清楚。

标签： innerhtml

解决方案

HTML 执行自上而下发生。HTML 在解析 HTML 文档时调用它找到的每个脚本。由于您将脚本放在“head”中，因此脚本会立即被调用。当脚本被调用时，你的 DOM 还没有准备好，你的脚本访问你的 DOM 元素返回一个空值。因此，在您的 DOM 完全加载后加载脚本，即在 body 之后或“”之前

所以理想的代码应该是这样的：

<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>

推荐阅读