javascript - 在 oninput 事件中更改值 typescript

我有一个 span，我想根据输入框的值在 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 span 中有值，但当我移动滑块的值时它不会改变，如何捕捉事件以同时更改我的 #time span 的值？

答案＃1

我不知道你想用这段代码做什么：output.innerHTML=((<HTMLTextAreaElement>e.target).value); 但要实现你描述的功能，赋值应该作用于滑块的值。

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>

答案＃2

我认为你必须给你的输入框添加 onChange 属性，这样它才能改变它的值

类似这样：

<input type="range" min="1" max="1000" value="50" onChange="handleInputChange()" class="slider" id="myRange" step="3" class="myRange" />

并且在你的脚本中，把你的代码放到一个函数里

funtion handleInputChange() {
   console.log("hello")
   // your logic
}