Question

我的页面上有一个输入范围滑块，显示多个值。我想在值更改时更改同一页面上元素的CSS值。我很清楚onChange函数，但我想知道是否有办法在函数changeAtt达到特定值时运行它，例如2。

HTML：

<div id="change"></div>
<input class="slider "type="range" min="0" max="3" value="0" step="1" onchange="showValue(this.value)" />
<span id="range">0</span>

CSS：

#change {
    color:black;
}

JS：

function showValue(newValue) {
    document.getElementById("range").innerHTML=newValue;
}
function changeAtt() {
    document.getElementById("change").style.color = "white";
}

Answer 1

如果值达到某个预定义金额，您可以从changeAtt()调用showValue()函数。

function showValue(newValue) {
    document.getElementById("range").innerHTML=newValue;
    if(newValue === 2) {
        changeAtt();
    }
}
function changeAtt() {
    document.getElementById("change").style.color = "white";
}

Answer 2

我认为您只需检查onChange事件中的值并进一步调用

function showValue(newValue) {
     if(newValue === '2') changeAtt()
     document.getElementById("range").innerHTML=newValue;
}
function changeAtt() {
    document.getElementById("change").style.color = "white";
}

Answer 3

如何使用此类oninput Event然后应用于您的解决方案：

function myFunction(val) {
  document.getElementById("demo").innerHTML = val;
  if (val <= 300) {
    document.getElementById("change").style.color = "red";
  } else if (val > 300) {
    document.getElementById("change").style.color = "blue";
  }
}

然后：

<div id="change"><p id="demo">50</p>
</div>
<input id="pricing" type="range" min="50" max="301" step="1" oninput="myFunction(this.value)">

当输入范围达到特定值时运行JS脚本

3 个答案: