元素属性的变化-为什么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之间，步长为0。

如果用户更改了第一个range元素，onchange事件将被触发(成功)，其中第二个range元素的"max"属性将被更改(按第一个元素的值-5)。到目前为止，这一切都很好。

重现问题的步骤：

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

预期行为：
当第一个范围元素的onchange Event被触发时，第二个范围元素"max"属性将变为105。第二范围元素的值仍然在145，并且应该达到105(可能的最高值)。由于第二个range元素发生了更改，onchange事件被触发，从而更新显示其值的span元素。

实际行为：
当第二个range元素的"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只检查输入的值是否更改，而不检查它的任何其他属性是否更改。此外，只有在特定的用户操作(如文本字段失去焦点)之后，浏览器才会检查是否从一开始就发生了更改。

为什么要使用第二个事件？似乎你应该能够在第二个事件中从第一个事件中做你想做的一切。