использование addEventListener на массив

Question

Делаю пародию игры морской бой с помощью django, добавляю сетку поля на сайт с помощью js и мне надо сделать так что бы каждый элемент этой сетки был своей определенной кнопкой. У каждого квадрата данной сетки есть свой уникальный id и когда я делаю из квадрата кнопку (без цикла то все работает):

findP3[0].addEventListener("click", function (e) {
        alert(findP3[0].id);
    }, false);

FindP3 это массив хранящий элементы данной сетки, но как только я пытаюсь сделать так с помощью цикла что бы сделать сразу для всех элементов то получаются проблемы:

for (var i = 0; i < 100; i++) {
    findP3[i].addEventListener("click", function (e) {
        alert(findP3[i].id);
    }, false);
}

то я получаю проблему в консоли:

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at HTMLDivElement.<anonymous> (createField.js:43:26)

Я попытался в alert писать:

 alert(findP3[i-1].id);

Ошибка ушла но теперь при нажатии на каждый элемент я получаю айди только блока 99.

А как мне сделать так что бы каждый блок был отдельной кнопкой и выводил свое айди при нажатии?

Вот весь код:

console.log("createField file connected successfully")
function getNumber (theStr) {
var theNumber = "";
for (var i = 0; i < theStr.length; i++)
    {
        if (Number(theStr.charAt(i))) {
            theNumber += theStr.charAt(i);

        }
    }
return theNumber;
}

let findP = document.getElementById("battleFieldBlocks");
//let myElement = document.createElement('p');
let FieldsArr = [];

for (var i = 0; i < 100; i++) {
    var blockTemp = document.createElement('div')
    blockTemp.id = "block"+i;
    blockTemp.className = "theBlock"
    FieldsArr.push(blockTemp);
}


for (var i = 0; i < 100; i++) {
    findP.append(FieldsArr[i]);
}
let findP3 = [];
var findTemp;
for (var i = 0; i < 100; i++) {
    findTemp = document.getElementById("block" + i);
    findP3.push(findTemp);
}

for (var i = 0; i < 100; i++) {
    findP3[i].addEventListener("click", function (e) {
        alert(findP3[i].id);
    }, false);
}

P.S C самими элементами проблем нет, всем присвоились правильные ID, я подозреваю что проблема именно с циклом

БЛОГ НА HUSL

использование addEventListener на массив

Ответы (0 шт):