时间戳

首页 > 解决方案 > 在范围滑块javascript中切换大小写

javascript - 在范围滑块javascript中切换大小写

问题描述

我正在尝试制作一个范围滑块，如果我用滑块选择一个值-它将显示一件事，如果我选择另一个值-它将显示另一件事。所以我试图用一个开关盒来做到这一点：如果你的值为 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>

标签： javascripthtmlcss

解决方案

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>

推荐阅读