當輸入範圍達到特定值時運行JS腳本

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

用戶可於showValue()調用changeAtt()函數如果值達到一定的預定量。

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)">