Как сменить картинку и текст при клике на ссылку

Question

Нужно сделать так, чтобы при клике на ссылку "Имя2" в h4 выводилось Имя2 и картинка менялась на "image2.jpg" и соответственно то же самое и с "Имя3"

HTML

<ul>
    <li><a href="">Имя1</a></li>
    <li><a href="">Имя2</a></li>
    <li><a href="">Имя3</a></li>
</ul>
<img src="image1.jpg" alt="">
<h4>Имя1</h4>

Answer 1

Как-то так

let links = document.getElementsByTagName("a");
let img = document.getElementsByTagName("img")[0];
let h4 = document.getElementsByTagName("h4")[0];

[...links].forEach(link=> link.addEventListener("click", function(e){
 e.preventDefault();
 let number = this.parentElement.innerText.replaceAll("Имя", "");
 console.log(`image${number}.jpg`);
 img.src = `image${number}.jpg`;
 h4.innerText = this.parentElement.innerText;
}));

<ul>
    <li><a href="">Имя1</a></li>
    <li><a href="">Имя2</a></li>
    <li><a href="">Имя3</a></li>
</ul>
<img src="image1.jpg" alt="">
<h4>Имя1</h4>

Answer 2

И вариант на jQuery:

$('a').click(function(e){
  e.preventDefault();
  $('h4').text($(this).text());
  $('img').attr('src',$(this).attr('href'));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li><a href="https://womanjour.ru/wp-content/uploads/2020/10/80666955470-6.jpg">Имя1</a></li>
    <li><a href="https://img3.goodfon.ru/original/4807x3637/5/b4/gorod-ulica-sankt-peterburg.jpg">Имя2</a></li>
    <li><a href="http://zvetnoe.ru/upload/catalog/2015/11/CG6321.jpg">Имя3</a></li>
</ul>
<img src="https://womanjour.ru/wp-content/uploads/2020/10/80666955470-6.jpg" alt="" width="200">
<h4>Имя1</h4>

БЛОГ НА HUSL

Как сменить картинку и текст при клике на ссылку

Ответы (2 шт):