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）

预期行为：
当第一个范围元素的onchange事件被触发时，第二个范围元素的“max”属性变为105.第二个范围元素的值仍然是145并且应该变为105（最高可能值）。因为第二个范围元素发生更改，所以会触发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);
    }



}

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

Answer 2

Onchange仅检查输入的值是否更改，如果其中任何其他属性发生更改。此外，只有在文本字段失去焦点等特定用户操作之后，浏览器才会检查是否发生了更改。

为什么要使用第二个事件呢？看起来你应该能够在第一个事件中完成你想要做的所有事情。

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

2 个答案: