如何更改多个元素？

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')，您可以使用which 将返回存储在kiddos.

然后你只需要遍历这些值并改变你想要的。

下面的循环示例：

for (var i = 0; i < kiddos.length; i++) {

     kiddos[i].innerHTML = userInput;

}

Answer 2

您好，您不应该使用 id，而是使用 class。

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!

在 Js 部分之后：

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