Изменение url адрес картинки при клике на button
Добрый день! Нужна помощь с заменой текущей картинки на другую при нажатии на кнопку "GO". Пожалуйсто если вы знаете как делать, помогите мне именно в таком виде кода без использования document.getElementById, var, onclick.
Я понимаю это как: Код:
<div class="box">const image = document.querySelector(".image") butt.addEventListener("click", ()) { urlImage() } function urlImage() { тут мне нужно заменить url картинки на другую когда нажимаю на кнопку GO } |
<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 |
Спасибо попробую так
|
рони,
да, есть грешок :cray: 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>
|
А в чем сакральный смысл
.setAttribute('src',"http://www.kenwalger.com/twitter_cards/mongodb-atlas.png") вместо обычного .src = "http://www.kenwalger.com/twitter_cards/mongodb-atlas.png" ? |
voraa,
не знал, учту |
рони,
или так, если таких блоков несколько (не используя классы) А если нужно использовать классы, тогда оно пишется по-другому? Мне просто нужно это сделать через классы определенных элементов |
Alexander3928,
Делегирование событий https://learn.javascript.ru/task/image-gallery https://learn.javascript.ru/event-delegation |
вверху два примера
парвый через классы. допустим, если у нас один image данного класса Код:
const image = document.querySelector(".image")Код:
e.target.parentElement.querySelector("img") |
Цитата:
Я бы уже не писал но если я так делаю через классы и вытаскиваю не одник элемент с таким классом, а все оно жалуется что Cannot read property 'setAttribute' of null и я не понимаю в чем проблема Код:
<button class="button">GO-1
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")
}
|
Цитата:
|
Цитата:
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. |
рони
Цитата:
<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>
|
Спасибо очень выручил
|
| Часовой пояс GMT +3, время: 03:48. |