переписать jQuery решение на чистый JS

24 сентября 2021, 07:20

Есть такое решение на jQuery:

jQuery('.buy_button').click(function(){  
    var autoname = jQuery(this).closest('.product-container', ['div']).find('.name-product a').text();     
    jQuery('input.prod_name').val(autoname);         
});

используется для автозаполнения поля во всплывающей форме в карточке товара. Как его переписать на чистом JS ?

Answer 1

Полагаю, как-то так:

var button = document.getElementsByClassName("buy_button")[0]; 
 
button.onclick = function () { 
  let container = this.closest('div.product-container'); 
  let autoname = container.querySelector('.name-product a').innerText; 
  container.querySelector('input.prod_name').value = autoname; 
};

<div class="product-container"> 
  <button class="buy_button">Click 4 copy!</button> 
  <div class="name-product"> 
    <a>I am LINK</a> 
  </div> 
  <input type="text" class="prod_name"> 
</div>

Если input лежит вне блока .product-container то эту строку:

container.querySelector('input.prod_name').value = autoname;

меняем на эту:

document.querySelector('input.prod_name').value = autoname;