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-在要检查整数值的开关块内。使用 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>

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

3 个答案: