Здравствуйте. Изучаю js и при решении одной задачи столкнулся с проблемой. Сама задача: "При нажатии кнопки «купить» выведите в консоль значение data-number того товара, на котором нажата кнопка"
HTML код:
<p>Товар один <button class="text123" data-num = "111">Купить</button></p>
<p>Товар два <button class="text1" data-num = "222">Купить</button></p>
<p>Товар три <button class="text2" data-num = "333">Купить</button></p>
JS код:
var button = document.getElementsByTagName('button');
for (var i = 0; i < button.length; i++) {
var btn = button[i];
btn.onclick = function(){
alert(btn.getAttribute('data-num'));
}
};
Проблема в том, что цикл каждый раз перезаписывает в переменую btn новое значение и в конце там будет только button с индексом 2, а значить при нажатии любой из кнопок и вызове функции у меня выведется "data-num" 3-ий кнопки (333). Но если в переменной btn не присваивать button[i], и написать внутри функции
alert(button[i].getAttribute('data-num'));
То в консоли будет ошибка о том, что button[i] не объявлена. Как можно решить эту проблему? Вот демка
jsfiddle.net/nfLjbue7 
