How do I change more than one element?

Question

EDIT: I changed the var to class but I might have some error in here.

Here it goes, I want to have this paragraph in which the user can change the name on the following paragraph. The code I'm using only changes one name but the rest remains the same.

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

No error messages, the code only changes one name instead of all three.

Answer 1

Use class="kiddo" instead of id in the html.

You can then use var kiddos = document.getElementsByClassName('kiddo') which will return an array of all the elements of that class name stored in kiddos.

Then you just need to loop through the values and change what you want.

Example of loop below:

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