CODEWITHSUNDEEP
javascripthtml
alireza
alireza

Reputation: 121

Selecting multiple elements with querySelectorAll and applying event in JavaScript

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
}
<div class="uper-container">
  <p>Metric/Imperial unit conversion</p>
  <!-- *********************************************************************************************** -->
  <!-- this input will change the value of 6's span below with the class of "number" -->
  <!-- ********************************************************************************************** -->
  <input type="text" id="myText" placeholder="number here" value="20" onchange="myFunction()">
</div>
<div class="lower-container">
  <p>Length(Meter/Feet)</p>
  <p>
    <span class="number"></span> meters = <span class="d"></span>feet |
    <span class="number"></span> feet = <span class="d"></span>meters
  </p>
  <p>Volume(Liters/Gallons)
    <</p>
      <p>
        <span class="number"></span> liter = <span class="d"></span>gallon |
        <span class="number"></span> gallon = <span class="d"></span>liter
      </p>
      <p>Mass(Kilograms/Pounds)</p>
      <p>
        <span class="number"></span> kilogram = <span class="d"></span>pound |
        <span class="number"></span> pound = <span class="d"></span>kilogram
      </p>
</div>

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.

Upvotes: 1

Views: 101

Answers (2)

Junaid Sikander Hakro
Junaid Sikander Hakro

Reputation: 544

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

Upvotes: 1

Will
Will

Reputation: 1193

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

Upvotes: 4

Related Questions