Question

我正在尝试使用html滑块输出月份。我制作了一个最大值为12的滑块，从1开始。

我的html代替了rangelider的数字代码：

<label id="labelslider" for="slider">Bepaal de forecast periode:</label> <!-- Range -->
<input type="range" id="slider" min="1" max="12" value="1" step="1" oninput="outputUpdate(value)" />
<output for="slider" id="range">0</output>

我的javascript代码是：

function outputUpdate(vol) {
    //document.querySelector('#range').value = vol;
    switch(document.querySelector('#range').value) {
        case "1":
            "Januari" = vol;
        break;
        case "2":
            "Februari" = vol;
        break;
        case "3":
            "Maart" = vol;
        break;
    }
}

我试图将开关功能合并到几个月来，但我无法让它工作。

Answer 1

有很多错误。

您应该在运营商的RHS中拥有该值。
您应该使用#slider的值进行切换。
您无需将任何值传递给函数。

工作代码段

function outputUpdate() {
  var vol = "";
  switch(document.querySelector('#slider').value) {
    case "1":
      vol = "Januari";
      break;
    case "2":
      vol = "Februari";
      break;
    case "3":
      vol = "Maart";
      break;
  }
  document.querySelector('#range').innerHTML = vol;
}

<label id="labelslider" for="slider">Bepaal de forecast periode:</label>
<input type="range" id="slider" min="1" max="12" value="1" step="1" oninput="outputUpdate(value)" />
<output for="slider" id="range">0</output>

更好的版本是使用数组：

var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
function outputUpdate() {
  document.querySelector('#range').innerHTML = months[document.querySelector('#slider').value - 1];
}

<label id="labelslider" for="slider">Bepaal de forecast periode:</label>
<input type="range" id="slider" min="1" max="12" value="1" step="1" oninput="outputUpdate(value)" />
<output for="slider" id="range">January</output>

获取滑块以显示月份而不是数字

1 个答案: