0

Делаю пародию игры морской бой с помощью 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, я подозреваю что проблема именно с циклом

  • Цикл - правильное решение...... properties of undefined значит у элемента нет свойства id. Продебажь, посмотри элементы на нужные свойства, количество и пр – Алексей Шиманский Jun 05 '22 at 03:19
  • 2
    Кстати, в цикле используй не var, а let. В этом проблема текущего цикла и навешивания слушателей у тебя – Алексей Шиманский Jun 05 '22 at 03:27
  • А в чём проблема сделать типа такого: document.querySelectorAll('theBlock').forEach(() => { /* Что-то сделать для всех блоков */ })? – ΝNL993 Jun 05 '22 at 07:20
  • @АлексейШиманский есть у всех елементов айди я уже проверил проблема с циклом. Не надо пожалуйста закрывать вопрос с сылкой на другой stackoverflow который не имеет отношения к моему вопросу – leocoolguy 0 Jun 05 '22 at 13:49
  • @leocoolguy0 Вполне себе имеет. Чтобы найти ошибку в своём коде, достаточно отладчиком по нему пробежаться и разобраться что происходит на каждой строчке кода........ Как бы то ни было я уже подсказал в чём состоит проблема – Алексей Шиманский Jun 05 '22 at 13:50
  • @АлексейШиманский Это понял, спасибо) просто тогда можно на эту ссылку абсолютно любой вопрос перевешить, мол сами смотрите и дебажьте)) сейчас буду пробовать с let и var менять как вы и сказали – leocoolguy 0 Jun 05 '22 at 13:54
  • "мол сами смотрите и дебажьте" --- так и есть. Если проблема в коде типа "у меня где-то тут ошибка, не могу понять" или "внезапно что-то не работает", то разработчик идёт дебажить свой код. Тут никакой хитрости нет. Любой разраб должен владеть этим инструментом и часто с ним и сидит, а не код пишет)) Если вопрос, условно: "как ускорить код", или специфика языка - окей. Но "не работает код" - однозначно отладка – Алексей Шиманский Jun 05 '22 at 13:56
  • @АлексейШиманский А можете объяснить пожалуйста почему возникает проблема из за var в цикле? цикл же в любом случае перебирается? – leocoolguy 0 Jun 05 '22 at 17:33
  • https://ru.stackoverflow.com/a/1145811/191482 .........в целом надо ваам почитать разницу между var и let....... и вообще лучше забыть про var навсегда – Алексей Шиманский Jun 05 '22 at 18:00

0 Answers0