在范围滑块内切换大小写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"),

    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>