Soy un principiante de js. Quiero actualizar un texto siempre que cambie el valor de un control deslizante. Dado que el control deslizante se puede cambiar sin hacer clic, decido usar .onchange para detectar si se cambia el valor del control deslizante. Sin embargo, no funciona. El texto solo se actualiza si el cambio del control deslizante se realiza haciendo clic. Me pregunto si hay una buena manera de detectar cualquier cambio en el control deslizante. ¡Gracias!
por cierto, también probé el .oninput pero obtuve el mismo resultado :(. Así que aquí está mi código actual
// definition of slider and p in HTML <input type="range" min="0" max="100" id="slider1" value="0"><p id=p1>0</p><br /> ... // In js, so the slider can affect each other slider1.onclick = function(){ slider3.value = v2>v1?(v2-v1):(v1-v2); } slider2.onclick = function(){ slider3.value = v2>v1?(v2-v1):(v1-v2); } slider3.onclick = function(){ slider1.value = (slider3.value+slider2.value)%100; } // I wanna change the corresponding innerHTML when the value of slider is changed. // However, the onchange isn't been triggered when the slider.value is changed slider1.onchange=function(){ p1.innerHTML=slider1.value; } slider2.onchange=function(){ p2.innerHTML=slider2.value; }Para hacer referencia a un elemento HTML desde javascript, debe obtener una referencia a él: establecer la id de un elemento HTML nos permite identificarlo, pero debemos usar el documento para hacer referencia a él.
<input id="slider1" type="range" />JS:
let slider1 = document.getElementById("slider1"); // Repeat for slider2 and slider3 let p1 = document.getElementById("p1"); // Repeat for p2 and p3 slider1.onclick = function(){ slider3.value = v2>v1?(v2-v1):(v1-v2); } // Rest of your code </script> Consulte la documentación de Mozilla en document.getElementById() para obtener más información: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById