Javascript-форум - Изменение url адрес картинки при клике на button

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Изменение url адрес картинки при клике на button (https://javascript.ru/forum/misc/83082-izmenenie-url-adres-kartinki-pri-klike-na-button.html)

Цитата:

второй через родителей и детей. Мы у родителя нажатой кнопки берем элемент img. Данный пример универсален

Код:

e.target.parentElement.querySelector("img")

Я так и делаю, использую классы.
Я бы уже не писал но если я так делаю через классы и вытаскиваю не одник элемент с таким классом, а все оно жалуется что Cannot read property 'setAttribute' of null и я не понимаю в чем проблема

Код:

<button class="button">GO-1

<img class="image" src="URL адрес">

</button>

<button class="button">

<img class="image" src="URL адрес">GO-2

</button>

const butt = document.querySelectorAll(".button")

butt.forEach((e) => {
    e.addEventListener("click", (e) => urlImage(e))
})

function urlImage(e) {
    e.target.parentElement.querySelectorAll(".image").setAttribute('src',"http://www.kenwalger.com/twitter_cards/mongodb-atlas.png")
}

Цитата:

Сообщение от Alexander3928

querySelectorAll(".image")

у списка элементов нет setAttribute, нужен цикл по каждому из списка.

Цитата:

Сообщение от рони (Сообщение 540181)

у списка элементов нет setAttribute, нужен цикл по каждому из списка.

Предлагает создать массив из разных url адресов на разные картинки и и обернуть

e.target.parentElement.querySelector("img").setAttribute('src',"http://www.kenwalger.com/twitter_cards/mongodb-atlas.png")

циклом for? Или как, я просто не могу понять идею, как это реализовать, то что вы сказали

Alexander3928,
знать бы ещё, что вы хотите сделать...

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони

Цитата:

Сообщение от рони (Сообщение 540183)

Alexander3928,
знать бы ещё, что вы хотите сделать...

<div class="main-box">
       <div class="box">
              <button class="button" id="buttId_1">GO-1</button>
       </div>
       <div class="box">
              <img src="URL адрес" class="image">
              <img src="URL адрес" class="image">
              <img src="URL адрес" class="image">
       </div>
</div>

const arr_url [
  ["URL адрес"],
  ["URL адрес"],
  ["URL адрес"],
]

const butt = document.querySelectorAll(".button")
const main_box = document.querySelectorAll(".main-box")

main_box.forEach((e) => {
    e.addEventListener("click", (e) => urlImage(e))
})

function urlImage(e) {
  if (e.target.id === "buttId_1") {
    for(let e of arr_url) {
 e.target.parentElement.querySelector(".image").setAttribute('src',"http://www.kenwalger.com/twitter_cards/mongodb-atlas.png")
    }
  }

я вещаю событие на общего родителя, ну и мне нужно когда на кнопку button нажимаю тогда меняются все 3 картинки на другие. Я вот написал, но код не наработает. Помогите пожалуйста :help:

Alexander3928,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script>
        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]);
            };
        });
    </script>
</head>

<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>

</html>

Спасибо очень выручил