Question

为什么下面这段代码不起作用？

<!DOCTYPE html>
      <html>
      <body>

      <h1 onclick="changeText(demo)">Click on this text!</h1>
      <h2 id="demo" >this text is to be changed</h2>
      <script>
      function changeText(id) {
       document.getElementById("id").innerHTML = "Ooops!";
     }
    </script>

    </body>
    </html>

我在不同的浏览器中试过这个但是它不起作用？

Answer 1

如果你看到你的控制台，它会告诉你到底发生了什么。

始终始终检查JavaScript控制台。

document.getElementById("id").innerHTML = "Ooops!";

正在寻找名为id

的ID

document.getElementById("demo").innerHTML = "Ooops!";

编辑：

重新阅读您想要的代码

document.getElementById(id).innerHTML = "Ooops!";

请注意，它不使用引号，因此它将使用传递的值。

除此之外，这也不起作用..因为您的语法调用已关闭。所以你真的想要这个：

<!DOCTYPE html>
  <html>
  <body>

  <h1 onclick="changeText('demo')">Click on this text!</h1>
  <h2 id="demo" >this text is to be changed</h2>
  <script>
  function changeText(id) {
   document.getElementById(id).innerHTML = "Ooops!";
 }
</script>

</body>
</html>

Answer 2

您需要按id值来调用它，而不是单词id，在您的示例中id值为demo，您需要将其更改为：

document.getElementById("demo").innerHTML = "Ooops!";

或者，您可以像这样编写HTML和JS代码：

＆＃13;

var title = document.getElementById("clickMe");
title.addEventListener('click',function() {
   document.getElementById("demo").innerHTML = "Ooops!";
 });

＆＃13;

<h1 id="clickMe">Click on this text!</h1>
<h2 id="demo">this text is to be changed</h2>

＆＃13;

Answer 3

当您将id传递给函数但您将其用作HTML控件ID时。不要在发票中保留身份证明

function changeText(id) {
   document.getElementById(id).innerHTML = "Ooops!";
 }

如果你想知道你在哪里犯错误，另一个调试方法是

将debugger保留在changeText功能
现在打开DeveloperTool - ＆gt;来源（铬合金）
现在尝试点击<h1>标记

为什么这个包含html dom代码的javascript不起作用？

3 个答案: