滑块根据值显示单词答案

【问题标题】：Slider to show a word based on a value滑块根据值显示单词
【发布时间】：2020-12-05 11:24:15
【问题描述】：

我有一个在其下方显示活动值的滑块。如何根据活动值将其从显示数字更改为显示单词？

是否可以将值“1”更改为单词“One”？

以下是我的全部：

HTML：

<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>

JS：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
    
slider.oninput = function() {
output.innerHTML = this.value;
}

任何帮助将不胜感激！

【问题讨论】：

标签： javascript html slider jquery-ui-slider

【解决方案1】：

就是这样

const nStr = 'zero one two three four five'.split(' ')

demo.textContent = nStr[ myRange.valueAsNumber ]

myRange.oninput=_=>
  {
  demo.textContent = nStr[ myRange.valueAsNumber ]
  }

<input type="range" min="1" max="5" value="1" id="myRange" step="1">
<p id="demo"> </p>

【讨论】：

将 nStr const 设置为字符串然后使用 javascript 将其拆分为数组有什么好处？为什么不从一开始就将其设置为数组-您的方法似乎添加了一个 JS 步骤来设置 const 变量....设置为 nStr =[ 'zero', 'one',' 会不会更好二'、'三'、'四'、'五'];
@gavgrif 这只是我的键盘很难用逗号和撇号，我也觉得它更具可读性，理解起来也不是很复杂

【解决方案2】：

您需要有一种机制来将数值与单词表示形式相匹配 - 我会使用数组来完成，并将数值传递给返回数值字符串值的函数。

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = numberToString(slider.value);
    
slider.oninput = function() {
  output.innerHTML = numberToString(this.value);
}

function numberToString(num) {
  const numberStrings = ['One', 'Two', 'Three', 'Four', 'Five'];
  return numberStrings[num-1]
}

<input type="range" min="1" max="5" value="1" id="myRange">
<p><span id="demo"></span></p>

【讨论】：

【解决方案3】：

还有一个……

<input type="range" min="1" max="5" value="1" id="myRange" oninput="demo.innerHTML=['One','Two','Three','Four','Five'][Number(this.value)-1];">
<p><span id="demo">One</span></p>

【讨论】：

【解决方案4】：

您应该能够通过使用输入类型“范围”的 datalist 元素来实现这一点。

<input type="range" value="0" min="0" max="4" list="tickmarks" id="myRange">
<datalist id="tickmarks">
  <option value="0" label="One">One</option>
  <option value="1" label="Two">One</option>
  <option value="2" label="Three">Two</option>
  <option value="3" label="Four">Three</option>
  <option value="4" label="Five">Four</option>
</datalist>
<p><span id="demo"></span></p>

然后您可以使用您编写的简单函数传递值；按标签选择选项值：

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
var datalist = document.getElementById("tickmarks").options

output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = datalist[this.value].label
}

【讨论】：