Почему не работает функция внутри цикла?

Question

[RedSmoke_smr]

Здравствуйте! Подскажите пожалуйста, почему не работает функция внутри цикла ?

for (var i = 0; i < openTextButtons.length; i++) {
        openTextButtons[i].addEventListener('click', function () {
            fullText[i].classList.toggle('visually-hidden');
        })
    }

При это ide PHPStorm выдает предупреждение (Mutable variable is accessible from closure less...
Inspection info: Checks for accessing mutable JavaScript variables in nested functions . The validation works in JavaScript, html, or jsp files) а при клике на кнопку в браузере в консоли пишет ошибку (Uncaught TypeError: Cannot read property 'classList' of undefined at HTMLButtonElement.)
Но если внутри функции вместо fullText[i] поставить fullText[0] (или индекс любого другого элемента массива, то все работает хорошо, но если каждый так прописывать то код получается слишком большой)
Прошу оказать мне помощь в этом вопросе, как решить данную проблемы. Увы я только новичок и всему еще учусь(
Заранее спасибо за ответы

Answer 1

[Николай]

Просто в цикле for замените объявление переменной var на let. А еще почитайте вот этот материал — https://github.com/azat-io/you-dont-know-js-ru/blo... чтобы понять почему так произошло. В вашем примере переменная i хранит всегда последнее значение в переборе цикла.

Comments

[RedSmoke_smr]

При замене var на let, да работать начинает, но только первый элемент из списка.
Статью обязательно прочитаю, спасибо вам большое за помощь и за то, что даете дельные советы и предостерегаете от ошибок и костылей.

[RedSmoke_smr]

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

for (var i = 0; i < openTextButtons.length; i++) {
            (function (j) {
                openTextButtons[j].addEventListener('click', function () {
                    fullText[j].classList.toggle('visually-hidden');
                })
            })(i);
        }

[Николай]

RedSmoke_smr, Да так верно, но вариант с let более современный (ES6) должно работать, видимо что-то не так написали.

Answer 2

[Александр]

потому что i вне зоны видимости для addEventListener. Можно сохранять ид в data аттрибут элемента для click а потом получать его используя this

Comments

[RedSmoke_smr]

Я прошу прощения, но не могли бы вы подробней объяснить или привести пример (на моем случае)?

[Александр]

хотя бы так:

for (var i = 0; i < openTextButtons.length; i++) {
        openTextButtons[i].dataset.item = i;
        openTextButtons[i].addEventListener('click', function () {
           fullText[this.dataset.item].classList.toggle('visually-hidden');
        })
    }

[RedSmoke_smr]

Александр, спасибо вам огромное! Все работает! Теперь я понял что нужно учить дальше)

[Николай]

Александр, RedSmoke_smr, Это дикий костыль и так делать не надо, очень вредный совет. Прочтите ссылку что я дал в ответе и вам все станет понятно, это самая типичная ошибка. Или вот еще решение без использования let, но вам надо понять почему так происходит, это фундаментальные вещи в js.

[Vann Damm]

Александр, если я не ошибаюсь, при использовании this в коллбэке, теряется контекст и this не будет равняться openTextButtons[i]. если не так поправьте

Answer 3

[abberati]

Внутри коллбэка-обработчика выведите в консоль i— увидите, почему код падает. Во всех обработчиках одно и то же значение.

В точности ваш пример с несколькими решениями.
https://learn.javascript.ru/task/make-army

Перед тем, как смотреть в решения, советую ознакомиться с уроком, к которому эта задача привязана. Ну или после.

Comments

[RedSmoke_smr]

Спасибо вам! Буду учить замыкание)