javascript - 在范围 slider javascript 内切换大小写

Question

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