Question

我有一个HTML格式的滑块，其值介于1到12之间，每个对应一个月。我想显示滑块旁边的月份，而不是“1”，“2”，...如何调用返回表示月份的字符串的javascript函数？

<p>
    <label for="nRadius" 
                 style="display: inline-block; width: 160px; text-align: right">
                 Month: <span id="nRadius-value" style="width:400px">...</span>
    </label>
    <input type="range" min="1" max="12" id="nRadius">
</p>

编辑：

基于另一个答案，我尝试了这个（在javascript的其余部分，在文件的后面开始）：

document.getElementById("nRadius-value").onchange = function() {getMonth()};

function getMonth()
 { 
    var newValue = document.getElementById("nRadius-value");
    var rng = document.getElementById("range");
    rng.textContext = { function() { if (rng=="1") {return "January";} };}
 }

Answer 1

基本上，只需更改滑块值，您就需要调用onchange侦听器来更新span元素中的月份显示。这是一个有效的解决方案：

＆＃13;

var slider = document.getElementById('nRadius');
var monthDiv = document.getElementById('nRadius-value');

var months =  ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

slider.addEventListener('change', function() {
  monthDiv.innerText = months[slider.value - 1];
});

// to show month initially
monthDiv.innerText = months[slider.value - 1];

＆＃13;

<p>
    <label for="nRadius" 
                 style="display: inline-block; width: 160px; text-align: right">
                 Month: <span id="nRadius-value" style="width:400px">...</span>
    </label>
    <input type="range" min="1" max="12" value="1" id="nRadius">
</p>

<div id="monthDiv"></div>

＆＃13;

更新：在IE中，上面的代码会在您移动滑块时更改月份。在Chrome（可能还有其他浏览器）中，它可能只会在您释放滑块时更改月份。如果您使用的浏览器属于这种情况，只需将事件处理程序条件从change更改为input即可。其他所有功能都一样。

为滑块文本调用javascript函数

1 个答案: