没有点击就不会触发slider.onchange？答案

【问题标题】：slider.onchange not triggered without clikcing?没有点击就不会触发slider.onchange？
【发布时间】：2022-01-31 10:15:42
【问题描述】：

我是 js 的初学者。只要滑块的值发生变化，我就想更新文本。由于滑块可能会在不单击的情况下更改，因此我决定使用.onchange 来检测滑块的值是否已更改。但是，它不起作用。仅当通过单击更改滑块时才会更新文本。我想知道是否有一种很好的方法来检测滑块的任何变化？谢谢！

顺便说一句，我也尝试过.oninput，但我得到了相同的结果:(。所以这是我当前的代码

// definition of slider and p in HTML
<input type="range" min="0" max="100" id="slider1" value="0"><p id=p1>0</p><br />
...
// In js, so the slider can affect each other
    slider1.onclick = function(){
        slider3.value = v2>v1?(v2-v1):(v1-v2);
    }
    slider2.onclick = function(){
        slider3.value = v2>v1?(v2-v1):(v1-v2);
    }
    slider3.onclick = function(){
        slider1.value = (slider3.value+slider2.value)%100;
    }
// I wanna change the corresponding innerHTML when the value of slider is changed. 
// However, the onchange isn't been triggered when the slider.value is changed
    slider1.onchange=function(){
        p1.innerHTML=slider1.value;
    }
    slider2.onchange=function(){
        p2.innerHTML=slider2.value;
    }

【问题讨论】：

我认为最好包含不起作用的代码。
你能说明你是如何定义slider1、slider2和slider3的吗？
@oriont 当然！我添加了slider1和p的定义，其他滑块的定义相同。
我看到了您的问题：设置 HTML 元素的 id 实际上不会创建 javascript 变量。我会发布一个解释更多的答案。

标签： javascript html web

【解决方案1】：

为了从 javascript 中引用 HTML 元素，您必须获得对它的引用：从 HTML 元素中设置 id 可以让我们识别它，但我们必须使用文档来实际引用它。

<input id="slider1" type="range" />

JS：

let slider1 = document.getElementById("slider1");
// Repeat for slider2 and slider3
let p1 = document.getElementById("p1");
// Repeat for p2 and p3

slider1.onclick = function(){
    slider3.value = v2>v1?(v2-v1):(v1-v2);
}
// Rest of your code
</script>

有关更多信息，请参阅document.getElementById() 上的 Mozilla 文档：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

【讨论】：