更改事件 oninput typescript 的值答案

【问题标题】：Change value on event oninput typescript更改事件 oninput typescript 的值
【发布时间】：2020-02-08 16:24:15
【问题描述】：

我有一个跨度，我想根据事件 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>

我的打字稿文件：

 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 中有值，但是当我移动滑块的值时它不会改变，如何捕捉事件来改变我的跨度 #time 的值？

【问题讨论】：

标签： javascript typescript events

【解决方案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
}

【讨论】：