Javascript innerhtml不在div上工作

Question

Javascript innerhtml不在div上工作

<!DOCTYPE html>
<html>

<head>
    <script>
        document.getElementById("passage").innerHTML = "Paragraph changed!";
    </script>
</head>

<body>

    <div id="passage">hello</div>
    <div id="question"></div>
    <div id="answers"></div>

</body>

</html>

Run Code Online (Sandbox Code Playgroud)

为什么document.getElementById("passage").innerHTML = "Paragraph changed!"不为我工作？我最后得到一个空白的屏幕,甚至没有原来的"你好".

Answer 1

小智 6

在加载元素之前调用脚本,尝试在加载元素后调用脚本

<!DOCTYPE html>
<html>
   <head>
   </head>
   <body>
      <div id="passage">hello</div>
      <div id="question"></div>
      <div id="answers"></div>
      <script>
         document.getElementById("passage").innerHTML = "Paragraph changed!";
      </script>
   </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Sag*_*r V 5

如果你检查控制台，你会看到一个错误

未捕获的类型错误：无法将属性“innerHTML”设置为 null

即HTML页面是自上而下解析并执行的。

因此，它无法识别您提到的元素是什么。

因此，您应该使用 EventListener 或将脚本放置在 body 标记末尾之前

方法1 事件监听器

<!DOCTYPE html>
<html>
<head>
</head>
<script>
window.onload=function(){
  document.getElementById("passage").innerHTML = "Paragraph changed!";
};
</script>
<body>

<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

方法2：脚本位于body标签上方

<!DOCTYPE html>
<html>
<head>
</head>

<body>

<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，6 月前
查看次数：	6298 次
最近记录：	8 年，6 月前