Question

我正在尝试使用innerHTML将div显示的文本从'hello'更改为'hey'。我知道我的函数已执行并且innerHTML已更改，因为我在点击显示'hey'时收到警报，但在我的网页和检查器中，'text'元素的内容仍为'hello'。

这里发生了什么？

代码：

<html>
  <head>
    <script type="text/javascript">
      function changehtml() {
        var text = document.getElementsByClassName('text');
        text.innerHTML = 'hey';
        alert(text.innerHTML)
      }
    </script>
  </head>
  <body>
     <div class='text' onclick='changehtml()'>
       hello
     </div>
    </body>
</html>

Answer 1

document.getElementsByClassName('text')为您提供节点集合。所以，你必须循环遍历它们以获得每个节点。或者对于此示例，您可以使用

 document.getElementsByClassName('text')[0];

或

document.querySelector('.text')

这将为您提供类名为text的第一个节点。

并且养成检查控制台错误的习惯，你可能会得到一个

Answer 2

Get elements by class returns an array of elements if you just want to change the one div give it and id and getElementById.

If you want to change multiple divs with that class the second snippet loops through the divs with that class and changes all of their texts.

function changehtml() {
  var text = document.getElementById('x');
  text.innerHTML = 'hey';
  alert(text.innerHTML)
}

<html>
<head>
</head>
<body>
  <div id="x" class='text' onclick='changehtml()'>
    hello
  </div>
</body>
</html>

function changehtml() {
  var text = document.getElementsByClassName('text');
  for (let i = 0; i < text.length; i++) {
    text[i].innerHTML = 'hey';
  }
}

<html>

<head>
</head>

<body>
  <div class='text' onclick='changehtml()'>
    hello
  </div>
</body>

</html>

Javascript innerHTML不改变div内容

2 个答案: