javascript - 更改元素的属性 - 为什么 onchange 事件没有触发？

Question

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

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>

JS:

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");
    slider2.setAttribute("max", slider.value - 5);
}

window.changeValue2 = function()
{
    var slider = document.getElementById("slider_length2");
    var span = document.getElementById("slider_length2_span");
    span.innerHTML = slider.value + " mm";
}

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

如果用户更改第一个范围元素，则会(成功)触发 onchange 事件，其中第二个范围元素的“max”属性发生更改(通过第一个元素的值 -5)。到目前为止这工作正常。

重现问题的步骤:

• 在第一个范围元素上选择任意数字(例如 150)
• 在第二个范围元素上选择尽可能大的数字(例如 145)
• 减少第一个范围元素的选定数量(例如 150 -> 110)

预期行为:
当第一个 range 元素的 onchange 事件被触发时，第二个 range 元素的“max”属性更改为 105。第二个 range 元素的值仍然是 145，并且应该变为 105(最大可能值)。由于第二个 range 元素发生更改，因此会触发 onchange 事件，从而更新显示其值的 span 元素。

实际行为:
当第二个范围元素的“max”属性发生更改时，onchange 事件似乎不会触发。

问题:为什么 onchange 事件没有触发？如果 onchange 事件不是在这种情况下使用的正确事件，我应该使用哪个事件？

Answer 1

我对你的函数做了一个欺骗，比如；

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



}

为了在您的情况下设置第二个范围的最大值，我将第二个范围设置为零，设置幻灯片2的最大范围并将幻灯片2值设置为可能的最大值。您可以在此处查看工作示例: http://jsfiddle.net/wtq6H/7/