Selecting multiple elements with querySelectorAll and applying event in JavaScript

Question

there is an onchange event on the input and want it to change the value of the spans with the class of "number" whenever it changes so there here is the HTML :

function myFunction() {
  var x = document.getElementById("myText").value
  document.querySelectorAll(".number").innerText = x
}


  Metric/Imperial unit conversion
  
  
  
  


  Length(Meter/Feet)
  
     meters = feet |
     feet = meters
  
  Volume(Liters/Gallons)
    <
      
         liter = gallon |
         gallon = liter
      
      Mass(Kilograms/Pounds)
      
         kilogram = pound |
         pound = kilogram

so how to make spans with the class="number" have the same value as input id="myText"? and one thing to mention is that I use scrimba editor.

user_6512857 · Answer

Unlike jQuery, Vanilla JS will not execute innerText to every node returned by querySelectorAll with an inline call. You would need to loop through them.

The code below should work:

function myFunction() {
    var x = document.getElementById("myText").value;
    var spans = document.querySelectorAll(".number");
    for (let i = 0; i < spans.length; i++) {
        spans[i].innerText = x;
    }
}

user_14928226 · Answer

You can also use the for-of loop.

function myFunction() {
    const x = document.getElementById("myText").value;
    const numberElements = document.querySelectorAll(".number");

    for (let element of numberElements) {
        element.innerText = x;
    }
}

Selecting multiple elements with querySelectorAll and applying event in JavaScript

2 Answers