2016-06-18 9 views
0

私は、イベント要素に与えられた関数のパラメータが反復変数に依存するHTML要素を動的に構築する必要があるというロジックを持っています。HTMLイベント属性に割り当てられた関数のパラメータをシャドウイングするのを避けるにはどうすればよいですか?

以下の例にはパラメータは含まれていませんが、修正したいのと同じ動作が行われます。

ここで、iの値は各反復によってシャドウされ、その結果、クリックされた各ボタンに対して警告される '10'という値になります。

私はこのアプローチを大幅に変更することなく、各ボタンが作成された反復に対応する値を警告するようにこの動作を修正するだけでなく、この動作がなぜ発生するのかをよりよく理解したいと思います。

for (var i = 1; i<10; i++) { 

    var newButton = document.createElement("button"); 

    newButton.innerHTML = "Button" + i; 
    newButton.onclick = function() { alert(i) }; 

    document.getElementById('container').appendChild(newButton); 
} 

jsfiddle:使用されるI変数は、同じ変数への参照であるため https://jsfiddle.net/poggtfnx/3/

+0

可能な複製(http://stackoverflow.com/questions/750486/javascript-closure-inside-loops- simple-practical-example) –

+0

私はあなたの質問をクローズするように投票しました。これは、JavaScriptの非常によくある質問です。すでに非常に良い回答があります。あなたがまだ答えを知らないなら、それは検索するのが非常に難しいものです。 –

答えて

0

この現象が起こります。それはonclick関数のために保持されている値ではなく、その参照であることを意味します。したがって、最後の値が常に使用されます。

これを修正する方法の1つは、DOM要素自体に価値を残すことです。ここで

newButton["data-i"] = i; 

は私のバイオリンです:[ループの内側にはJavaScript閉鎖 - シンプルな実用的な例]の https://jsfiddle.net/poggtfnx/5/

関連する問題