Скрипт срабатывает на второй клик. Почему?

Question

[sokol1111]

Есть блок с галереей картинок, есть пустой блок. При клике по картинке она становится бекграундом нижнего блока.
Суть проблемы, при загрузке страницы, первый клик по картинке проходит впустую, и только со второго всё работает как нужно. Почему?

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

        });
    }

Вот пример: u0763918test1.isp.regruhosting.ru

Answer 1

[Lord_Dantes]

Скрипт поставьте в document.ready