Изменение значение кликом на картинке?

Question

[Zo1reX]

У меня есть 4 картинки (например: 1 - яблоко, 2 - банан, 3 - груша) и Обложка, мне нужно что бы при клике на картинку "яблоко" у меня менялось картинке обложки на яблоко.

<h1>Выберите обложку</h1>

<p>Яблоко</p>
<a href="#"><img src=<?= $galary[0] ?>></a>

<p>Банан</p>
<a href="#"><img src=<?= $galary[1] ?>></a>

<p>Груша</p>
<a href="#"><img src=<?= $galary[2] ?>></a>

Comments

[MrColdCoffee]

такие вещи на js обычно делаются

[Zo1reX]

MrColdCoffee, а можно пример как через js ?

[idShura]

"мне нужно" и "подскажите пожалуйста как сделать" разные вещи.

[ThunderCat]

Zo1reX,

а можно пример как через js ?

по событию клик на картинке меняем срц обложки на срц таргета. Пипец как сложно. Плагин на жквери еще поищите...

И теги вообще мимо кассы, поставьте нормальные теги хоть...

[Zo1reX]

ThunderCat, Спасибо за совет, вам бы только свою токсичность сбавить.

[ThunderCat]

Zo1reX, Вообще то это сарказм, токсичность - искусственный термин для людей, которые не умеют в юмор и не могут терпеть критики в свой адрес. #Не_будь_как_Шелон!

Answer 1

[Everybody_Lies]

Comments

[MrColdCoffee]

тут ещё preventDefault() нужно добавить
т.к при клике улетает к якорю

Answer 2

[MrColdCoffee]

ПРИМЕР

HTML:

<h1>Обложка</h1>
<img id="view" src="">

<h2>Выберите обложку</h2>

<p>Яблоко</p>
<a class="sbtn" href="#"><img src="123"></a>

<p>Банан</p>
<a class="sbtn" href="#"><img src="1234"></a>

<p>Груша</p>
<a class="sbtn" href="#"><img src="12345"></a>

JS:

document.querySelectorAll('.sbtn').forEach(elem => elem.addEventListener('click',(e)=>{
e.preventDefault();
document.getElementById('view').setAttribute('src', elem.querySelector('img') ? elem.querySelector('img').getAttribute('src') : document.getElementById('view').getAttribute('src') );
})
);