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 :

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

and this is the JavaScript side :

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

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.

>Solution :

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