The script works on the second click. Why?

Question

JavaScript

There is a block with a gallery of pictures, there is an empty block. When you click on the image, it becomes the background of the bottom block.
The essence of the problem, when loading the page, the first click on the image is wasted, and only from the second everything works as it should. Why?

<div class="img-container" id="img-container">
<img src="....../upload/14271531.jpg" alt="" class="picture" onclick="countRabbits()">
<img src="....../upload/14271531.jpg" alt="" class="picture" onclick="countRabbits()">
</div>
<div class="box2"></div>

function countRabbits() {
        let pictures = document.querySelectorAll(".picture");
        let boxTwo = document.querySelector(".box2");

        pictures.forEach((picture) => {

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

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

        });
    }

Here is an example: u0763918test1.isp.regruhosting.ru

Answer 1

Put the script in document.ready