Javascript 正在更改元素的属性-为什么onchange事件未触发？

有关下面描述的问题的演示，请参阅

HTML:

<input type="range" id="slider_length" min="10" max="200" value="0" step="10" onchange="changeValue1();" />
<span id="slider_length_span">10 mm</span>
</br>
<input type="range" id="slider_length2" min="5" max="15" value="0" step="10" onchange="changeValue2();" />
<span id="slider_length2_span">5 mm</span>

我有一个范围元素，用户可以通过10步选择10到200之间的值。
第二个范围元素的值介于5和15之间，步长为10

如果用户更改第一个range元素，onchange事件将被触发（成功），其中第二个range元素的“max”属性将被更改（通过第一个元素-5的值）。到目前为止，这一切都很好

重现问题的步骤：

• 在第一个范围元素上选择任意数字（例如150）
• 在第二个范围元素上选择可能的最高数字（例如145）
• 减少第一个范围元素上的所选数字（例如150->110）

预期行为：
当第一个range元素的onchange事件被触发时，第二个range元素的“max”属性更改为105。第二个范围元素的值仍然是145，应该变为105（可能的最高值）。由于第二个range元素发生更改，因此会触发onchange事件，更新显示其值的span元素

实际行为：
当第二个range元素的“max”属性被更改时，onchange事件似乎不会触发

---

问题：为什么onchange事件没有触发？如果onchange事件不是本例中要使用的正确事件，那么我应该使用哪个事件？

我对您的函数进行了如下操作：

window.changeValue1 = function()
{
    var slider = document.getElementById("slider_length");
    var span = document.getElementById("slider_length_span");
    span.innerHTML = slider.value + " mm";

    var slider2 = document.getElementById("slider_length2");
    if ((slider.value - 5) < slider2.value) {
        slider2.value = 0;
        slider2.setAttribute("max", slider.value - 5);
        slider2.value = slider.value - 5;
        var span = document.getElementById("slider_length2_span");
        span.innerHTML = slider2.value + " mm";
    } else {
        slider2.setAttribute("max", slider.value - 5);
    }



}

window.changeValue1=函数（）
{
var slider=document.getElementById（“slider_length”）；
var span=document.getElementById（“slider_length_span”）；
span.innerHTML=slider.value+“mm”；
var slider2=document.getElementById（“slider_length2”）；
if（（slider.value-5）

---

为了在您的案例中设置第二个范围的最大值，我将第二个范围设置为零，将slide2的最大范围设置为最大值，并将slide2的值设置为可能的最大值。您可以在这里看到工作示例：Onchange仅检查输入的值是否更改，而不检查输入的任何其他属性是否更改。此外，只有在特定的用户操作（如文本字段失去焦点）后，浏览器才会检查是否已开始更改

---

为什么要使用第二个事件？似乎您应该能够在第一个事件中执行第二个事件中的所有操作。

通过脚本更改值时，更改事件不会触发。一种解决方案是也从脚本触发事件（但使用更复杂的事件处理方法更容易实现）。

window.changeValue1 = function()
{
    var slider = document.getElementById("slider_length");
    var span = document.getElementById("slider_length_span");
    span.innerHTML = slider.value + " mm";

    var slider2 = document.getElementById("slider_length2");
    if ((slider.value - 5) < slider2.value) {
        slider2.value = 0;
        slider2.setAttribute("max", slider.value - 5);
        slider2.value = slider.value - 5;
        var span = document.getElementById("slider_length2_span");
        span.innerHTML = slider2.value + " mm";
    } else {
        slider2.setAttribute("max", slider.value - 5);
    }



}