Изменение url адрес картинки при клике на button

[Alexander3928]

Добрый день! Нужна помощь с заменой текущей картинки на другую при нажатии на кнопку "GO". Пожалуйсто если вы знаете как делать, помогите мне именно в таком виде кода без использования document.getElementById, var, onclick.

Я понимаю это как:

<div class="box">
      <img src="URL адрес" class="image">
      <button class="button">GO</button>
</div>

const butt = document.querySelector(".button")
const image = document.querySelector(".image")

butt.addEventListener("click", ()) {
urlImage()
}

function urlImage() {
тут мне нужно заменить url картинки на другую когда нажимаю на кнопку GO
}

[od0201]

<div class="box">
  <img src="URL адрес" class="image">
  <button class="button">GO</button>
</div>
<script>
const butt = document.querySelector(".button")
const image = document.querySelector(".image")

butt.addEventListener("click", ()=> urlImage())

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

}
</script>

[рони]

od0201,

()=> urlImage() === urlImage

[Alexander3928]

Спасибо попробую так

[od0201]

рони,
да, есть грешок

Alexander3928,
или так, если таких блоков несколько (не используя классы)

<div class="box">
  <img src="URL адрес">
  <button>GO</button>
</div>
<div class="box">
  <img src="URL адрес">
  <button>GO</button>
</div>
<script>
const butt = document.querySelectorAll("button")

butt.forEach((e)=>{
  e.addEventListener("click", (e)=> urlImage(e))
})
function urlImage(e) {
  e.target.parentElement.querySelector("img").setAttribute('src',"http://www.kenwalger.com/twitter_cards/mongodb-atlas.png")
}
</script>

[voraa]

А в чем сакральный смысл
.setAttribute('src',"http://www.kenwalger.com/twitter_cards/mongodb-atlas.png")
вместо обычного
.src = "http://www.kenwalger.com/twitter_cards/mongodb-atlas.png"
?

[od0201]

voraa,
не знал, учту

[Alexander3928]

рони,
или так, если таких блоков несколько (не используя классы)

А если нужно использовать классы, тогда оно пишется по-другому? Мне просто нужно это сделать через классы определенных элементов

[рони]

Alexander3928,
Делегирование событий
https://learn.javascript.ru/task/image-gallery

https://learn.javascript.ru/event-delegation

[od0201]

вверху два примера
парвый через классы. допустим, если у нас один image данного класса

const image = document.querySelector(".image")

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

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