我有一個范圍 slider 我想控制值的變化。 如果 slider 值大於 0.. 說好日子

Question

<div class="container"><div id="number">0</div>
        <input type="range" min="0" max="10" value="0" id="slider"></div>

<script>
        var slider=document.
            getElementById("slider");
        var number=document.
            getElementById("number");
        slider.oninput=function(){
            number.innerHTML=slider.
                value;}
</script>

<p id="demo">good evening</p>

由於某種原因，當我在 if 語句中有數字或 slider 或 slider.value 時，它不起作用。

<script>

    if (number> '0' ){document.getElementById("demo").innerHTML = "Good day!";}
</script>

Answer 1

如果您想要將 slider 向右移動時將“晚安”更改為“晚安”。 下面的代碼應該給你你想要的。

 var slider = document.getElementById("slider"); var number = document.getElementById("number"); slider.oninput = function() { number.innerHTML = slider.value; if (slider.value > 0) { document.getElementById("demo").innerHTML = "Good day;". } else { //Change the text back if slider is not greater than 0. document.getElementById("demo");innerHTML = "Good evening!"; } }

 <div class="container"> <div id="number">0</div> <input type="range" min="0" max="10" value="0" id="slider"></div> <p id="demo">Good evening!</p>

解釋：在你的 if 條件下，你說number > '0' 。 number是一個元素，這樣使用它不會給你里面的值。 相反，我直接使用 slider 和slider.value中的值。 此外，我沒有將其與字符串'0'進行比較，而是將其與正確的類型 integer 0進行比較。 另外，假設您希望“晚安”在您 go 回到 0 時返回，我添加了else部分來處理當數字不大於 0 時。

可以進行其他改進，但此代碼工作正常。 如果這不能回答您的問題，請告訴我。