Tengo un código que se parece a lo siguiente. Cuando presiono el botón de reinicio, quiero que mi elemento de párrafo se actualice a los valores predeterminados del control deslizante, pero permanecen en el mismo valor que tenían antes del reinicio. ¿Cómo puedo hacer que el elemento de párrafo refleje el valor del control deslizante de reinicio?
Enlace JSFiddle: https://jsfiddle.net/apshah/f6ymkcLe/
HTML:
<div class ='slidercontainer' id='slidercontainer'> <form action method="POST" class="sliderform" id="sliderform"> <div class = "divslider" id="slider1"> <input type="range" min="1" max="100" value="50" class="slider" id="myRange1"> <p> <span class="sVal" id="val1">50</span> </p> </div> <div class = "divslider" id="slider2"> <input type="range" min="1" max="10" value="5" class="slider" id="myRange2"> <p> <span class="sVal" id="val2">5</span> </p> </div> </form> <div class="space1"></div> <div class='buttonbox'> <button type="submit" form="sliderform" class="sliderbutton" id="accept">Accept</button> <button type="reset" form="sliderform" class="sliderbutton" id="reset">Reset</button> <div class="space2"></div> </div> </div>JavaScript:
document.body.onload = function(){ runSlider("myRange1", 'val1') runSlider('myRange2', 'val2') } function runSlider(inputID, pID){ var slider = document.getElementById(inputID); var output = document.getElementById(pID); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } }Deberías agregar otro oyente para esto. Usé setTimeout debido a async.
document.body.onload = function(){ runSlider("myRange1", 'val1') runSlider('myRange2', 'val2') registerFormEvent() } function registerFormEvent() { const formEl = document.querySelector(".sliderform"); const onFormReset = function(){ setTimeout(() => { document.querySelector("#val1").innerHTML = document.querySelector("#myRange1").value; document.querySelector("#val2").innerHTML = document.querySelector("#myRange2").value; }, 0) } formEl.addEventListener("reset", onFormReset) } function runSlider(inputID, pID){ var slider = document.getElementById(inputID); var output = document.getElementById(pID); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; } }