具有 onchange 功能的 HTML5 滑块答案

【问题标题】：HTML5 Slider with onchange function具有 onchange 功能的 HTML5 滑块
【发布时间】：2012-12-15 22:14:34
【问题描述】：

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

这是 HTML 部分：

<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;
}

【问题讨论】：

标签： javascript html slider

【解决方案1】：

它可以工作，你只需要确保在渲染元素时定义了JavaScript函数，例如：

<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>

查看此演示：https://jsfiddle.net/Mmgxg/

更好的方法是删除内联 onchange 属性：

<input id="slide" type="range" min="1" max="100" step="1" value="10">
<div id="sliderAmount"></div>

然后在你的 JavaScript 代码中添加监听器：

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

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

https://jsfiddle.net/PPBUJ/

【讨论】：

你甚至不需要担心函数定义在元素之上。首先，当元素被渲染时，该函数不会被调用，只有当你移动滑块时它才会被调用。
其次，当您使用“function name(){}”语法定义一个函数时，它的定义会在执行脚本之前被解析器“移动”到作用域的顶部.当您使用“name = function(){}”替代语法定义函数时，情况并非如此。在这种情况下，定义保留在原处，并且该函数仅在执行该行之后才存在。
您好，想知道如何在更改期间而不是更改后触发事件？这可能吗？
@RubenMartinezJr。我发现这个问题有同样的问题，我发现使用 oninput 而不是 onchange 会在滑块移动后立即触发，至少在当前版本的 chrome 中
请注意，在 2020 年，建议改为使用 addEventListener(input, evt => ...)，因为“on...”事件处理在 2012 年已成为传统，但此后已成为一种模式避免。还要注意使用input 而不是change 事件，因为input 在您移动滑块时会连续触发，而change 在您松开时触发。