如何在 JavaScript 中重置滑塊輸出文本

Question

我的代碼如下所示。 當我點擊重置按鈕時，我希望我的段落元素更新為默認滑塊值，但它們保持與重置之前相同的值。 如何使段落元素反映重置滑塊值？

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

}

Answer 1

您應該為此添加另一個偵聽器。 由於異步，我使用了 setTimeout。

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

}