Передача параметров в функции события

Question

Взгляните на этот простой пример

<input type="button" value="btn1" id="btn1" />
<input type="button" value="btn2" id="btn2" />
<input type="button" value="btn3" id="btn3" />
<input type="button" value="btn4" id="btn4" />
<input type="button" value="btn5" id="btn5" />

<script>
    for (i=1; i<5; ++i){
        var btn = document.getElementById('btn' + i);
        btn.onmouseover = function(){
            alert(i);
        }
    }
</script>

Я ожидаю, что он должен предупреждать, например, 1, когда я перемещаю мышь на btn1, но, к сожалению, он предупреждает 5 вообще!1007 *

Как передать переменные из цикла в функцию?

Answer 1

Это проблема замкнутого цикла.Все указатели мыши закрываются над одной и той же переменной, поскольку JavaScript имеет только область действия функции.Вы можете исправить это, создав новую функцию и, следовательно, новую область видимости.

for (i=1; i<5; ++i){
    (function(i)
    {
        var btn = document.getElementById('btn' + i);
        btn.onmouseover = function(){
            alert(i);
        }
    })(i);
}