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

问题描述 投票:1回答:3

我的页面上有一个输入范围滑块,显示多个值。我想在值更改时更改同一页面上元素的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";
}
javascript html css
3个回答
2
投票

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

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

1
投票

我想你只需要检查onChange事件中的值并给出进一步的调用

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

0
投票

如何使用这样的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)">
© www.soinside.com 2019 - 2024. All rights reserved.