Javascript 具有onchange功能的HTML5滑块

我有一个滑块（输入类型范围），它应该在值被更改时运行函数。然后，该函数应在单独的div容器中显示新值。在函数中放置警报后，我知道函数没有被调用，但在谷歌搜索了一个小时并尝试了一些不同的方法后，我就是找不到错误

以下是HTML部分：

<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">

<div id="sliderAmount"></div>

---

提前谢谢

它可以工作，您只需要确保在呈现元素时定义了javascript函数f.ex

<script>
    function updateSlider(slideAmount) {
        var sliderDiv = document.getElementById("sliderAmount");
        sliderDiv.innerHTML = slideAmount;
    }
</script>
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>​

然后在javascript中添加侦听器：

//Slider
function updateSlider(slideAmount)
{
alert("error");
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}

var slide = document.getElementById('slide'),
    sliderDiv = document.getElementById("sliderAmount");

slide.onchange = function() {
    sliderDiv.innerHTML = this.value;
}​

---

​

您甚至不需要担心函数定义在元素之上。首先，当呈现元素时，函数不会被调用，只有当您移动滑块时才会被调用。其次，当您使用“function name（）{}”语法定义函数时，解析器会在执行脚本之前将其定义“移动”到作用域的顶部。使用“name=function（）{}”替代语法定义函数时，情况并非如此。在这种情况下，定义保留在原来的位置，函数只在执行该行之后才存在。嗨，想知道如何在更改期间而不是在更改之后触发事件吗？这可能吗？@RubenMartinezJr。我发现这个问题也有同样的问题，我发现使用oninput而不是onchange会使滑块移动时立即启动，至少在chromenote的当前版本中，在2020年，建议使用

addEventListener（

input

，evt=>…）

，因为“on…”事件处理在2012年成为传统，但自那以后，它已成为一种必须避免的模式。还要注意使用

input

而不是

change

事件，因为

input

会在移动滑块时持续激发，而

change

会在松开滑块后激发。

var slide = document.getElementById('slide'),
    sliderDiv = document.getElementById("sliderAmount");

slide.onchange = function() {
    sliderDiv.innerHTML = this.value;
}​