javascript - 如何更改多个元素？

Question

编辑:我将 var 更改为 class，但这里可能有一些错误。

好了，我想要这一段，用户可以在其中更改下一段的名称。我使用的代码仅更改了一个名称，但其余名称保持不变。

  <script type="text/javascript">
    function changey(){
      var userInput = document.getElementById('userInput').value;
      var list = document.getElementByClassName('kiddo');

      for (let item of list) {
         item.innerHTML = userInput;
      }
    }
</script>

<input id="userInput" type="text" value="Name of kid" />
<input onclick="changey()" type="button" value="Change Name" /><br>

Welcome to the site <b class="kiddo">dude</b> This is how you create a document that changes the name of the <b class="kiddo">dude</b>. If you want to say <b class="kiddo">dude</b> more times, you can!

没有错误消息，代码只更改了一个名称，而不是所有三个。

Answer 1

在 html 中使用 class="kiddo" 而不是 id。

然后您可以使用 var kiddos = document.getElementsByClassName('kiddo')，它将返回存储在 kiddos 中的该类名的所有元素的数组。

然后您只需要遍历这些值并更改您想要的内容。

下面的循环示例:

for (var i = 0; i < kiddos.length; i++) {
     kiddos[i].innerHTML = userInput;
}