更改元素的屬性 - 爲什麼onchange事件不會觸發？

對於問題的示範下面描述見JSFiddle 更改元素的屬性 - 爲什麼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>

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元素。

實際行爲：
當第二範圍元素的「最大」屬性得到改變onchange事件似乎並不火。

問題：爲什麼onchange事件不會觸發？如果onchange事件不是在這種情況下使用的正確事件，那麼我應該使用哪個事件？

來源

2014-02-10 Jbartmann

當通過腳本更改值時，change事件根本不會觸發。一種解決方案就是從腳本中觸發事件（但通過更復雜的事件處理方法可以更輕鬆地完成）。 – CBroe

我對你的功能做了一個小把戲，

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



}

爲了設置的第二範圍最大值在你的情況，我已經設置第二範圍爲零，滑件的設置最大範圍，並設置滑件價值可能最大值。你可以看到在這裏工作的例子：http://jsfiddle.net/wtq6H/7/

來源

2014-02-10 12:04:15

爲我工作，謝謝:) – Jbartmann

平變化只檢查如果輸入的數值沒有發生變化，如果它的任何的其他屬性改變。此外，只有在像文本字段丟失焦點這樣的特定用戶操作之後，瀏覽器纔會檢查是否發生了變化。

爲什麼你要使用第二個事件呢？看起來你應該能夠在第一場比賽中完成第二場比賽中你想做的一切。

來源

2014-02-10 12:19:43 Seraphithan

更改元素的屬性 - 爲什麼onchange事件不會觸發？

回答

相關問題