Как по клику подставить изображение?

Question

[азаза]

Есть такой скриптик, который подставляет по клику название в input товара с itema по которому кликнули.
Есть необходимость в модальном окне выше inputa с названием, которое подставляется подставлять еще и изображение.

Answer 1

[Maxim Kirshin]

Првет. Вроде вопрос про JQuery, а у тебя чистый JS.

Если хочешь jquery использовать, то должно быть что-то вроде этого

Твой html

<img id="popup-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" alt="" />

src нельзя оставлять пустым, чтобы валидатор не ругался, поэтому там просто пиксель 1х1

JS

// Ждем пока DOM прогрузится
$(document).ready(function(){
  // По клику на кнопку с классом .button
  $(".button").click(function(){
   // Находим элемент родителя с классом ".item", в нем внутри находим элемент с классом ".pr-img", забираем у него значение атрибута 'src'
    let imgSrc = $(this).closest(".item").find(".pr-img").attr('src');
  // Подставляем в заранее созданное нами изображение.
    $("#popup-image").attr('src', imgSrc);
  }
});

Answer 2

[Пашенька]

https://codepen.io/like-a-boss/pen/NWWrQOg

Answer 3

[Lord_Dantes]

Аналогично просто делаете там заранее img и ему свойства CSS какие нужны. И дальше просто подставляете путь в атрибут src

Comments

[азаза]

Знал бы прикуп, жил бы в Сочи

да не получается

[Andrew]

natojezlo, что не получается? src менять?

[азаза]

Andrew, src пробовал подставлять, что то не то

да и не пойму как и куда

addEventListener('click', ({target}) => {
   if(target.closest('.button')) {
      const parent = target.closest('.item'),
            div = parent.querySelector('.pr-name'),
            text = div.textContent;
         document.querySelector('#overlay [src="article"]').value = text;
   }

   })

<div id="overlay">
<img src="article"/>
</div>

я х.з куда и что тут правильно прописать