title: Selecting multiple elements with querySelectorAll and applying event in JavaScript
body: <p>there is an onchange event on the input and want it to change the value of the spans with the class of &quot;number&quot; whenever it changes so there here is the HTML :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    var x = document.getElementById("myText").value
    document.querySelectorAll(".number").innerText = x
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="uper-container"&gt;
    &lt;p&gt;Metric/Imperial unit conversion&lt;/p&gt;
    &lt;!-- *********************************************************************************************** --&gt;
    &lt;!-- this input will change the value of 6's span below with the class of "number" --&gt;
    &lt;!-- ********************************************************************************************** --&gt;
    &lt;input type="text" id="myText" placeholder="number here" value="20" onchange="myFunction()"&gt;
  &lt;/div&gt;
  &lt;div class="lower-container"&gt;
    &lt;p&gt;Length(Meter/Feet)&lt;/p&gt;
    &lt;p&gt;
      &lt;span class="number"&gt;&lt;/span&gt; meters = &lt;span class="d"&gt;&lt;/span&gt;feet |
      &lt;span class="number"&gt;&lt;/span&gt; feet = &lt;span class="d"&gt;&lt;/span&gt;meters
    &lt;/p&gt;
    &lt;p&gt;Volume(Liters/Gallons)
      &lt;&lt;/p&gt;
        &lt;p&gt;
          &lt;span class="number"&gt;&lt;/span&gt; liter = &lt;span class="d"&gt;&lt;/span&gt;gallon |
          &lt;span class="number"&gt;&lt;/span&gt; gallon = &lt;span class="d"&gt;&lt;/span&gt;liter
        &lt;/p&gt;
        &lt;p&gt;Mass(Kilograms/Pounds)&lt;/p&gt;
        &lt;p&gt;
          &lt;span class="number"&gt;&lt;/span&gt; kilogram = &lt;span class="d"&gt;&lt;/span&gt;pound |
          &lt;span class="number"&gt;&lt;/span&gt; pound = &lt;span class="d"&gt;&lt;/span&gt;kilogram
        &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>so how to make spans with the class=&quot;number&quot; have the same value as input id=&quot;myText&quot;?
  and one thing to mention is that I use scrimba editor.</p>