javascript - 更改事件 oninput typescript 的值

Question

我有一个范围，我想根据事件 oninput 上的输入值进行更改

这是我的 html:

  <div class="slidecontainer">
        <input type="range" min="1" max="1000" value="50" class="slider" id="myRange" step="3" class="myRange">
        <p>Value: <span id="demo"></span></p>
        <p>Gain de temps: <span id="time"></span></p>
      </div>

我的 typescript 文件:

 var slider = document.getElementById("myRange") as HTMLInputElement;
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    var convertSlider = parseInt(slider.value); 
    var gainTime = Math.round(convertSlider * 4* (1 - Math.min(convertSlider, 200) * 40 / 10000)).toString();
    var gainTimeOutput = document.getElementById("time");
    gainTimeOutput.innerHTML = gainTime; 

    slider.oninput = e => {
      output.innerHTML = ((<HTMLTextAreaElement>e.target).value);
      gainTimeOutput.innerHTML = gainTime;
    };

通过这个解决方案，我的范围内有值#time，但当我移动 slider 的值时它不会改变，如何捕获事件以更改值我的跨度#time？

Answer 1

我不知道你想用这段代码做什么:output.innerHTML = ((<HTMLTextAreaElement>e.target).value);但为了完成您所描述的任务，分配应该是 slider 的值。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var gainTimeOutput = document.getElementById("time");

slider.oninput = e => {
  output.innerHTML = slider.value;
  
  var convertSlider = parseInt(slider.value); 
  var gainTime = Math.round(convertSlider * 4* (1 - Math.min(convertSlider, 200) * 40 / 10000)).toString();
  gainTimeOutput.innerHTML = gainTime; 
};

  <div class="slidecontainer">
    <input type="range" min="1" max="1000" value="50" class="slider myRange" id="myRange" step="3">
    <p>Value: <span id="demo"></span></p>
    <p>Gain de temps: <span id="time"></span></p>
  </div>