Показать сообщение отдельно
  #1 (permalink)  
Старый 14.12.2021, 00:24
Аспирант
Отправить личное сообщение для Alexander3928 Посмотреть профиль Найти все сообщения от Alexander3928
 
Регистрация: 19.05.2021
Сообщений: 75

Вопросы со скриптом
Добрый вечер.
Есть скрипт который при нажатии на кнопку заменяет url адрес для всех картинок, другими словами изображение. К скрипту вопросов нету он работает, как нужно. У меня больше теоретические вопросы.

Вот HTML разметка

<body>
    <div class="main-box">
        <div class="box">
            <button class="button">GO-1</button>
        </div>
        <div class="box">
            <img src="https://picsum.photos/300/100?1" class="image">
            <img src="https://picsum.photos/300/100?2" class="image">
            <img src="https://picsum.photos/300/100?3" class="image">
        </div>
    </div>
</body>


Вот скрипт
document.addEventListener("DOMContentLoaded", function() {
            const arr_url = [
                ["https://picsum.photos/300/100?4"],
                ["https://picsum.photos/300/100?5"],
                ["https://picsum.photos/300/100?6"]
            ];
            const main_box = document.querySelectorAll(".main-box");
            main_box.forEach(box => box.addEventListener("click", urlImage));
            function urlImage(e) {
                let button = e.target.closest(".button");
                if (button) this.querySelectorAll(".image").forEach((img, i) => img.src = arr_url[i]);
            };
        });




Вопросы связанные с этим участком кода
сonst main_box = document.querySelectorAll(".main-box");
main_box.forEach(box => box.addEventListener("click", urlImage));


Сперва достается див общий это понятно и вешается метод forEach на него. Сами вопросы заключаются

1)Как forEach понимает что есть элемент с классом box, если я не доставал его используя document.querySelector, может это аргумент или атрибут я не знаю?
2) Зачем на тот же box давать событие клика? если клик происходит по кнопке. В чем идея давать клик по элементу который просто используется как можно сказать ящик где хранятся все картинки.

Последний раз редактировалось Alexander3928, 14.12.2021 в 00:28.
Ответить с цитированием