How does the js script logic work?

  • 0
    I am learning JS and I have a question about hanging events:
    in the showListFilm () function I create on the page, after which I hang the delete event on the div.delete everything works as it should (now I commented out the code with events in the function), but the question is, when I take this code out of the function, the deletion only works 1 time on the element I click on, why is this happening? Can anyone explain the thread?

    let btnDel = document.querySelectorAll('.delete');
        btnDel.forEach((btn, i) => {
            btn.addEventListener('click', (e) => {
                e.target.parentElement.remove();
                movieDB.movies.splice(i,1);
                showListFilm(movieDB.movies, promoItemsWrp);
            });
        });


    a NodeList of 6 elements gets into the btnDel variable, and then it's blunt.

    'use strict';
    
    document.addEventListener('DOMContentLoaded', () => {
    
        const movieDB = {
            movies: [
                "Логан",
                "Лига справедливости",
                "Ла-ла лэнд",
                "Одержимость",
                "Скотт Пилигрим против...",
                "Бла-бла"
            ]
        };
    
        const deleteAdv = (arr) => {
            arr.forEach(item => {
                item.remove();
            });
        };
    
    
        const sortArr = (arr) => {
            arr.sort();
        };
    
        const adv = document.querySelectorAll('.promo__adv img');
    
        deleteAdv(adv);
    
    
    
        document.querySelector('.promo__genre').textContent = 'драма';
    
        document.querySelector('.promo__bg').style.background = 'url(img/bg.jpg) center center/cover no-repeat';
    
        const promoItemsWrp = document.querySelector('.promo__interactive-list'),
            formAddWrp = document.querySelector('form.add'),
            inputAddFilm = formAddWrp.querySelector('.adding__input'),
            inputFavFilm = formAddWrp.querySelector('input[type=checkbox]');
    
    
        showListFilm(movieDB.movies, promoItemsWrp);
    
    
    
        formAddWrp.addEventListener('submit', (e) => {
            e.preventDefault();
    
            if (inputAddFilm.value) {
                let inputValueText = inputAddFilm.value.toUpperCase();
                let favFilmChecked = inputFavFilm.checked;
    
                if (inputValueText.length > 21) {
                    inputValueText = `${inputValueText.slice(0,21)}...`;
                }
    
                movieDB.movies.push(inputValueText);
    
                if (favFilmChecked) {
                    console.log('Добавляем любимый фильм');
                }
    
                showListFilm(movieDB.movies, promoItemsWrp);
                e.target.reset();
            }
        });
    
    
        let btnDel = document.querySelectorAll('.delete');
        btnDel.forEach((btn, i) => {
            btn.addEventListener('click', (e) => {
                e.target.parentElement.remove();
                movieDB.movies.splice(i,1);
                showListFilm(movieDB.movies, promoItemsWrp);
            });
        });
    
    
        function showListFilm(films, parent) {
            sortArr(films);
            parent.innerHTML = "";
    
            films.forEach((item, i) => {
                parent.innerHTML += `
                <li class="promo__interactive-item">
                ${i+1}. ${item}
                <div class="delete"></div>
                </li>
                `;
    
            // document.querySelectorAll('.delete').forEach((btn, i) => {
            //     btn.addEventListener('click', (e) => {
            //         e.target.parentElement.remove();
            //          movieDB.movies.splice(i,1);
            //         showListFilm(films, parent);
            //     });
            // });
    
        });
        }
    });
    JavaScript Emma Andrade, Mar 10, 2019

  • 1 Answers
  • 0
    when I take this code out of the function, the deletion is triggered only 1 time on the element I click on, why is this happening?


    Because you hang events only 1 time during the initial call of the script, and then you call showListFilm, COMPLETELY redraw all promo items (including divas in them) and that's it. Where will the events appear in the new divs, if you don't create them after redrawing?
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!