hay un evento de cambio en la entrada y quiero que cambie el valor de los intervalos con la clase de "número" siempre que cambie, así que aquí está el 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>entonces, ¿cómo hacer que los tramos con class="number" tengan el mismo valor que input id="myText"? y una cosa a mencionar es que uso el editor scrimba.
A diferencia de jQuery, Vanilla JS no ejecutará innerText en cada nodo devuelto por querySelectorAll con una llamada en línea. Tendrías que recorrerlos.
El siguiente código debería funcionar:
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; } }También puede utilizar el bucle for-of.
function myFunction() { const x = document.getElementById("myText").value; const numberElements = document.querySelectorAll(".number"); for (let element of numberElements) { element.innerText = x; } }