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

为什么这个包含html dom代码的javascript不起作用?,javascript,html,dom,Javascript,Html,Dom,为什么下面的代码不起作用 <!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 c

为什么下面的代码不起作用

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

点击这个文本!
此文本将被更改
函数changeText(id){
document.getElementById(“id”).innerHTML=“Ooops!”;
}
我已经在不同的浏览器中尝试过,但是

它不工作了?

如果您查看控制台,它会准确地告诉您发生了什么

总是,总是,总是检查JavaScript控制台

document.getElementById("id").innerHTML = "Ooops!";
正在查找名为
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>

点击这个文本!
此文本将被更改
函数changeText(id){
document.getElementById(id).innerHTML=“Ooops!”;
}

您需要通过
id
值而不是单词id来调用它,在您的示例中
id
值是
demo
,您需要将其更改为:

document.getElementById("demo").innerHTML = "Ooops!";
或者,您可以这样编写HTML和JS代码:

var title=document.getElementById(“clickMe”);
title.addEventListener('click',function()){
document.getElementById(“demo”).innerHTML=“Ooops!”;
});
点击此文本!

当您将
id
传递给函数时,将更改此文本,但您将其用作HTML控件id。请勿将id保留在引号中

function changeText(id) {
   document.getElementById(id).innerHTML = "Ooops!";
 }
如果您想知道在哪里出错,另一种调试方法是

  • changeText
    函数中保留
    debugger
  • 现在打开DeveloperTool-->源代码(在chrome中)
  • 现在尝试单击
    标记

  • 向上投票选择始终检查控制台请解释您希望代码做什么以及它如何工作。但是FWIW我认为问题在于,当您真正想要传递参数id时,您正在向getElementById传递一个文本字符串?IOW删除(“id”)中的引号。