在范圍滑塊javascript內切換大小寫

Question

我正在嘗試制作一個范圍滑塊，如果我用滑塊選擇一個值 - 它會顯示一件事，如果我選擇另一個值 - 它會顯示另一件事。 所以我想用一個 switch case 來做：如果你的值是 0 - 然后給我看這條消息，如果你的值是 30 - 給我看另一條消息。 問題是它根本不起作用......在這里我添加了我的代碼：

!( https://postimg.cc/Lnd1PhSs )

所以我的 HTML 代碼是這樣的：

 var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; }; switch (output) { case 0: document.write("Good job<br />"); break; case 30: document.write("Pretty good<br />"); break; case 60: document.write("Passed<br />"); break; case 90: document.write("Passed<br />"); break; default: document.write("Unknown grade<br />"); } document.write("Exiting switch block");

 .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 5px; background: grey; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: rgb(58, 111, 46); border-radius: 40px; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: rgb(58, 111, 46); border-radius: 40px; border: none; }

 <input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange"> <p>Value: <span id="demo"></span></p>

Answer 1

您可以將工作事件應用於元素並移交this 。 然后，您可以獲取該值並將其轉換為數字，因為 HTML 中輸入的所有結果都是字符串並且需要轉換（如果需要）。 switch使用嚴格的比較，如果你使用一個字符串並將值與一個數字進行比較，你總是得到false 。

然后你需要取文本。 最好的辦法是獲取頁面的另一個元素並在那里顯示結果。 document.write僅在頁面未呈現到最后並且不建議使用時才起作用。

 var result = document.getElementById("result"), output = document.getElementById("demo"); function update(element) { var value = +element.value, // convert to number text; output.innerHTML = value; switch (value) { case 0: text = "Good job"; break; case 30: text = "Pretty good"; break; case 60: text = "Passed"; break; case 90: text = "Passed"; break; default: text = "Unknown grade"; } result.innerHTML = text; }

 <input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange" onchange="update(this)"> <p>Value: <span id="demo"></span></p> <p id="result"></p>

Answer 2

switch 塊在您的oninput回調函數之外，因此如果滑塊的值發生變化，它將不會被評估。 此外， document.write()將替換您的整個 html 文檔。 嘗試使用console.log()代替。 最后， this.value是 String 類型 - 在您的 switch 塊中，您正在檢查整數值。 使用parseInt(this.value)將輸入轉換為數字。

 var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; switch (parseInt(this.value)) { case 0: console.log("Good job<br />"); break; case 30: console.log("Pretty good<br />"); break; case 60: console.log("Passed<br />"); break; case 90: console.log("Passed<br />"); break; default: console.log("Unknown grade<br />"); } };

 .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 5px; background: grey; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: rgb(58, 111, 46); border-radius: 40px; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: rgb(58, 111, 46); border-radius: 40px; border: none; }

 <input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange"> <p>Value: <span id="demo"></span></p>

Answer 3

只需使用一些Javascript修復程序更新您的代碼。 試試這個我希望它會幫助你。 謝謝

 var slider = document.getElementById("myRange"); var output = document.getElementById("demo"); var message = document.getElementById("message"); output.innerHTML = slider.value; slider.oninput = function() { output.innerHTML = this.value; switch (parseInt(this.value)) { case 0: messageAppend("Good job"); break; case 30: messageAppend("Pretty good"); break; case 60: messageAppend("Passed"); break; case 90: messageAppend("Passed"); break; default: messageAppend("Unknown grade"); } }; function messageAppend(text) { message.innerText = text; }

 .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 5px; background: grey; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; background: rgb(58, 111, 46); border-radius: 40px; } .slider::-moz-range-thumb { width: 25px; height: 25px; background: rgb(58, 111, 46); border-radius: 40px; border: none; }

 <input type="range" min="0" max="90" value="0" step="30" class="slider" id="myRange"> <p>Value: <span id="demo"></span></p> <div id="message"></div>