В книге "Javascript for PHP developers" Стояна Стефанова в разделе "Exercise: onclick Loop" дается пример по теме замыканий - как управлять областью видимости так, чтобы данные во вложенные функции передавались корректно.
Как написать это без замыканий и без вложенных функций я понимаю, но делаю по аналогии с предыдущими примерами по замыканиям из книги и не получается.
Задача: есть три кнопки, при нажатии на каждую нужно алертить ее равильный индекс. Нужно переписать код так, чтобы с использованием вложенных функций правильно "сбить" связь с областями видимости и пробрасывать индекс i в каждой итерации for правильно, а не сохранять ссылку на последнее значение i.
Ссылка на оригинал:
www.jspatterns.com/js4php/closure-dom-loop.html
<!doctype html>
<html>
<body>
<button id="button-1">one</button>
<button id="button-2">two</button>
<button id="button-3">three</button>
<script>
for (var i = 1; i <= 3; i++) {
document.getElementById('button-' + i).onclick = function() {
alert("This is button: " + i);
}
}
</script>
</body>
</html>
Ссылка на мой код:
jsfiddle
Объясните пожалуйста, как это грамотно исправить или помогите похожим примером.