Why does the script stop working?

Question

JavaScript

There is a site u0763918test1.isp.regruhosting.ru
It displays a list of pictures, when you click on each, the address of the picture is displayed and it is also in a larger form in the container.
It is also possible to upload your own image separately. But here the script stops working, it transmits the address of the image, but stops displaying the image.

Here is the script itself:

<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

This is because you are adding elements dynamically. Try putting a handler on document, then add a check for the element's class.

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;
  }
});