Ячейки таблицы не передают свои идентификаторы в параметры моей функции

Мой небольшой код

https://codepen.io/kymed/pen/wxawJX

Что я пытаюсь сделать

Я сейчас изучаю javascript, начинающий веб-разработчик. Я практикуюсь, создавая простое приложение для игры в крестики-нолики. Каждая ячейка в таблице крестиков-ноликов имеет идентификатор от 0 до 8, и когда я пытаюсь прикрепить этот идентификатор к функции tileSelected() (при щелчке по плитке), все события onclick для каждой ячейки содержат идентификатор последнего клетка. (JS-код с 7 по 9)

for(i = 0; i < 9; i++) {
document.getElementById(i.toString()).onclick = function() { tileSelected(i.toString()); }
}

Что я пробовал

Я много раз менял этот код, прежде чем передавать идентификаторы в эту функцию для события onclick, хотя каждый раз возникает одна и та же проблема.

Так в чем тут ошибка? Что я делаю не так?


javascript event-listener web-applications html event-handling
person helpztheme    schedule 12.07.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку вы объявили циклы for, i является глобальной переменной. Когда эти циклы заканчиваются, i имеет значение 9. Это значение 9 отображается при вызове функции обратного вызова. Если вы примените переменную к циклу с помощью for (let i = 0; i < 9; i++), вы увидите улучшение.

person kshetline    schedule 12.07.2018

arrow_upward
0
arrow_downward

Ваше значение i равно 9, поэтому вы вызываете функцию tileSelected i.toString(), поэтому оно всегда равно 9.

Вы можете использовать this и передать идентификатор. Ключевое слово this оценивается как значение This Binding текущего контекста выполнения.

tileSelected(this.id);

for(i = 0; i < 9; i++) {
  document.getElementById(i.toString()).onclick = function() { tileSelected(this.id); }
}

person Mohammad Ali Rony    schedule 12.07.2018