（JS）使用IF / Switch语句更改滑块值

Question

如果这看起来像基本的东西，仍然可以获得Javascript的支持，请原谅我。

我在网页上设置了一个滑块，CSS / HTML功能非常完美，但我正在尝试显示年份值，以对应滑块的每个值，从1到6。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = 133;

slider.oninput = function() {
  switch (this.value) {
    case 1:
      output.innerHTML = 133;
      break;
    case 2:
      output.innerHTML = 88;
      break;
    case 3:
      output.innerHTML = 60;
      break;
    case 4:
      output.innerHTML = 44;
      break;
    case 5:
      output.innerHTML = 36;
      break;
    case 6:
      output.innerHTML = 26;
      break;

    default:
      output.innerHTML = 133;
  }
  output.innerHTML = this.value;
}

<div class="slidecontainer">
  <input type="range" min="1" max="6" value="1" class="slider" id="myRange">
  <p><span id="demo"></span> BC</p>
</div>

目前它输出1到6所以它确实起作用，我可以在输入之前将默认值设置为133，它只是在移动滑块时不会推出我需要的值。

switch语句是否是这项工作的正确工具，如果是，我哪里出错？

Answer 1

this.value返回一个字符串。你需要让它返回一个数字，以便你的比较工作。或者比较字符串。无论哪种方式，以下示例都有效。看看我如何在你的交换机操作符中添加parseInt（this.value）。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = 133;

slider.oninput = function() {
  switch (parseInt(this.value)) {
    case 1:
      output.innerHTML = 133;
      break;
    case 2:
      output.innerHTML = 88;
      break;
    case 3:
      output.innerHTML = 60;
      break;
    case 4:
      output.innerHTML = 44;
      break;
    case 5:
      output.innerHTML = 36;
      break;
    case 6:
      output.innerHTML = 26;
      break;

    default:
      output.innerHTML = 133;
  }
}

<div class="slidecontainer">
  <input type="range" min="1" max="6" value="1" class="slider" id="myRange">
  <p><span id="demo"></span> BC</p>
</div>