Добрый вечер.
Есть скрипт который при нажатии на кнопку заменяет 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 давать событие клика? если клик происходит по кнопке. В чем идея давать клик по элементу который просто используется как можно сказать ящик где хранятся все картинки.
