Почему перестаёт срабатывать скрипт?

Question

[corona-net]

Есть сайт u0763918test1.isp.regruhosting.ru
В нём отображается список картинок, при клике на каждую отображаются адресс картинки и она же в большем виде в контейнере.
Также есть возможность закачать свою картинку отдельно. Но здесь перестаёт срабатывать скрипт, он передаёт адресс картинки, но перестаёт отображать картинку.

Вот сам скрипт:

<script>
    function countRabbits() {
        let pictures = document.querySelectorAll(".picture");
        let boxTwo = document.querySelector(".box2");
        let boxText = document.querySelector(".boxText99");

        pictures.forEach((picture) => {

            let background = picture.getAttribute("src");

            picture.addEventListener("click", (e) => {
                boxTwo.style.background = `url(${background}) no-repeat center/cover`;
                boxText.innerText = background;
            });

        });
    }

</script>

Answer 1

[Onzabr]

Это происходит из-за того, что вы добавляете элементы динамически. Попробуйте повесить обработчик на document, затем добавьте проверку на наличие класса элемента.

document.addEventListener('click', event => {
	let picture = event.target;
	let boxTwo = document.querySelector(".box2");
	let boxText = document.querySelector(".boxText99");
	
	if (picture.classList.contains('picture')) { // проверяем, действительно ли это элемент с классом picture
		let background = picture.getAttribute("src");
		boxTwo.style.background = `url(${background}) no-repeat center/cover`;
		boxText.innerText = background;
	}
});

Comments

[corona-net]

Не срабатывает, к сожалению, тоже самое.