在范围滑块内切换大小写JavaScript

Question

我试图制作一个范围滑块，如果我用滑块选择一个值，它将显示一件事，如果我选择另一个值，它将显示另一件事。因此，我尝试使用开关盒：如果您的值是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"),&nbsp; &nbsp; output = document.getElementById("demo");function update(element) {&nbsp; &nbsp; var value = +element.value, // convert to number&nbsp; &nbsp; &nbsp; &nbsp; text;&nbsp; &nbsp; output.innerHTML = value;&nbsp; &nbsp; switch (value) {&nbsp; &nbsp; &nbsp; &nbsp; case 0:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text = "Good job";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 30:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text = "Pretty good";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 60:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text = "Passed";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; case 90:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text = "Passed";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;text = "Unknown grade";&nbsp; &nbsp; }&nbsp; &nbsp; 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）将输入转换为数字。&nbsp; var slider = document.getElementById("myRange");&nbsp; var output = document.getElementById("demo");&nbsp; output.innerHTML = slider.value;&nbsp; slider.oninput = function() {&nbsp; &nbsp; output.innerHTML = this.value;&nbsp; &nbsp; switch (parseInt(this.value)) {&nbsp; &nbsp; &nbsp; case 0:&nbsp; &nbsp; &nbsp; &nbsp; console.log("Good job<br />");&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 30:&nbsp; &nbsp; &nbsp; &nbsp; console.log("Pretty good<br />");&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 60:&nbsp; &nbsp; &nbsp; &nbsp; console.log("Passed<br />");&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 90:&nbsp; &nbsp; &nbsp; &nbsp; console.log("Passed<br />");&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; console.log("Unknown grade<br />");&nbsp; &nbsp; }&nbsp; };.slidecontainer {&nbsp; width: 100%;}.slider {&nbsp; -webkit-appearance: none;&nbsp; width: 100%;&nbsp; height: 5px;&nbsp; background: grey;&nbsp; outline: none;&nbsp; opacity: 0.7;&nbsp; -webkit-transition: .2s;&nbsp; transition: opacity .2s;}.slider:hover {&nbsp; opacity: 1;}.slider::-webkit-slider-thumb {&nbsp; -webkit-appearance: none;&nbsp; appearance: none;&nbsp; width: 25px;&nbsp; height: 25px;&nbsp; background: rgb(58, 111, 46);&nbsp; border-radius: 40px;}.slider::-moz-range-thumb {&nbsp; width: 25px;&nbsp; height: 25px;&nbsp; background: rgb(58, 111, 46);&nbsp; border-radius: 40px;&nbsp; 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() {&nbsp; output.innerHTML = this.value;&nbsp; switch (parseInt(this.value)) {&nbsp; case 0:&nbsp; &nbsp; messageAppend("Good job");&nbsp; &nbsp; break;&nbsp; case 30:&nbsp; &nbsp; messageAppend("Pretty good");&nbsp; &nbsp; break;&nbsp; case 60:&nbsp; &nbsp; messageAppend("Passed");&nbsp; &nbsp; break;&nbsp; case 90:&nbsp; &nbsp; messageAppend("Passed");&nbsp; &nbsp; break;&nbsp; &nbsp;&nbsp;&nbsp; default:&nbsp; &nbsp; messageAppend("Unknown grade");&nbsp; }};function messageAppend(text) {&nbsp; message.innerText = text;}.slidecontainer {&nbsp; width: 100%;}.slider {&nbsp; -webkit-appearance: none;&nbsp; width: 100%;&nbsp; height: 5px;&nbsp; background: grey;&nbsp; outline: none;&nbsp; opacity: 0.7;&nbsp; -webkit-transition: .2s;&nbsp; transition: opacity .2s;}.slider:hover {&nbsp; opacity: 1;}.slider::-webkit-slider-thumb {&nbsp; -webkit-appearance: none;&nbsp; appearance: none;&nbsp; width: 25px;&nbsp; height: 25px;&nbsp; background: rgb(58, 111, 46);&nbsp; border-radius: 40px;}.slider::-moz-range-thumb {&nbsp; width: 25px;&nbsp; height: 25px;&nbsp; background: rgb(58, 111, 46);&nbsp; border-radius: 40px;&nbsp; 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>