Делаю пародию игры морской бой с помощью 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, я подозреваю что проблема именно с циклом
var, аlet. В этом проблема текущего цикла и навешивания слушателей у тебя – Алексей Шиманский Jun 05 '22 at 03:27document.querySelectorAll('theBlock').forEach(() => { /* Что-то сделать для всех блоков */ })? – ΝNL993 Jun 05 '22 at 07:20