Почему событие работает только на последнем элементе?

Question

[dotalovsky]

function createGame(count) {
           let div = document.getElementById('game-container')
           let ul = createGameList()
           let li = createGameElement()

           div.append(ul)

           for (let i =0; i < count; i++) {
            li = createGameElement(newArr[i])
             ul.append(li.item)
           }

           li.item.addEventListener('click',function(){
               
           })

При кликле создается count количество элементов li,с цифрой из массива,дальше хочу получать значение li при кликле на элемент,но выводится только значение последнего элемента.как быть?Пытаюсь написать игру 'в пары'.

Answer 1

[Сергей Соколов]

Цикл отработал, в переменной li содержится последний созданный элемент.
На него и вешаете слушатель события, уже снаружи цикла.

На все предыдущие элементы слушателя никто так и не повесил.

Лучше как-то так:

const clickHandle = () => {
  // ...
};

for (let i = 0; i < count; i++) {
  const li = createGameElement(newArr[i]);
  const { item } = li;
  ul.append(item);
  item.addEventListener('click', clickHandle);
}

Answer 2

[Rst0]

нужно слушателя цеплять внутри цикла

for (let i =0; i < count; i++) {
            li = createGameElement(newArr[i])
             ul.append(li.item);
           li.item.addEventListener('click',function(){
               
           });
}

Comments

[dotalovsky]

Если событие поместить внутрь цикла,то выходит тоже самое,я пытаюсь при клике к примеру вывести внутрее содержимое ээлемента в консоль,но какой бы не тыкал,выводит последний

[Rst0]

нужно понимать, что делают функции

createGameList()
        createGameElement()

у вас этого нет в примере