Переменная, созданная в разных местах работает в addEventListener по-разному, почему?

Question

[D1Zasterly]

Создал переменную вверху сайта, ниже (после какой-то части кода) создал событие на клик у переменной, но событие игнорируется. Перемесит создание переменной в ту часть кода, в которой и создавал событие и все заработало. Как это работает?

document.addEventListener("DOMContentLoaded", () => {
    const movieDB = {
        movies: []
    };
    const promoAdv = document.querySelectorAll(".promo__adv>img"),
          promoBg = document.querySelector(".promo__bg"),
          promoGenre = promoBg.querySelector(".promo__genre"),
          promoMovieList = document.querySelector(".promo__interactive-list"),
          promoForm = document.querySelector("form.add"),
          promoSendMovie = promoForm.querySelector("button"),
          promoMovieValue = promoForm.querySelector(".adding__input"),
          checkBox = document.querySelector('[type="checkbox"]');
    
    const deleteMovieBtns = document.querySelectorAll('.delete'); //если создать переменную здесь, ниже событие игнорируется


    promoGenre.textContent = 'драма';


    const delteAdv = (arr) => {
        arr.forEach(item => {
            item.remove();
        });
    }
    delteAdv(promoAdv);


    promoBg.style.backgroundImage = "url(./img/bg.jpg)";


    const updateList = (films, parent) => {
        films.sort();
        parent.innerHTML = "";
        films.forEach((film, i) => {
            parent.innerHTML += `
            <li class="promo__interactive-item">${i + 1} ${film}
                <div class="delete"></div>
            </li>
        `;
        })
        // document.querySelectorAll('.delete').forEach((btn, i)=> {
        //     btn.addEventListener('click',() => {
        //         btn.parentElement.remove();
        //         movieDB.movies.splice(i, 1);
        //     })
        // });
    }
    updateList(movieDB.movies, promoMovieList);

    const clickBtn = event => {
        event.preventDefault();
        const favorite = checkBox.checked;
        if (promoMovieValue.value) {
            if (promoMovieValue.value.length > 21) {
                promoMovieValue.value = promoMovieValue.value.slice(0, 22) + "...";
            }
            movieDB.movies.push(promoMovieValue.value.toUpperCase());
            updateList(movieDB.movies, promoMovieList);
            if (favorite){
                console.log();
            }
            promoForm.reset();
        }
    }

    promoSendMovie.addEventListener('click', clickBtn);

    // Здесь идет создание события

    const deleteMovieBtns = document.querySelectorAll('.delete'); // если создавать переменную здесь, все работает

    deleteMovieClick = () => {
        console.log('dsfsfsdfkjsl')
    }

    deleteMovieBtns.forEach((btn, i) => {

        btn.addEventListener('click', deleteMovieClick);
    })

});

Comments

[VoidVolker]

D1Zasterly минимальный код, который воспроизводит проблему в студию.

[Сергей delphinpro]

код-то покажите. оба варианта.

[Lynn «Кофеман»]

Оба кода в студию

[Антон Иванов]

Вангую без кода, потому что изучаем область видимости переменных
https://learn.javascript.ru/closure

[VoidVolker]

D1Zasterly ваш код не воспроизводит проблему. Будьте любезны упростите код до минимума и чтобы он воспроизводил вашу проблему или сделайте стандартную песочницу в jsfiddle/codepen.

Answer 1

[Lynn «Кофеман»]

Классическая ошибка.

В момент вызова верхней сточки никаких элементов с классом delete, ещё не существует, так что вы получаете пустой список.

Элементы с классом delete создаются при вызове updateList и поэтому создание переменной ниже этого вызова уже работает.

Comments

[D1Zasterly]

благодарю

Answer 2

[VoidVolker]

Ну, собственно тут всё достаточно очевидно, если присмотреться - ищется то, чего ещё нет:

const deleteMovieBtns = document.querySelectorAll('.delete')
...
const updateList = (films, parent) => {
        films.forEach((film, i) => {
            ...
            parent.innerHTML += `
            <li class="promo__interactive-item">${i + 1} ${film}
                <div class="delete"></div>
            </li>
        `;
        })
    }
    updateList(movieDB.movies, promoMovieList);