Как добавить текст из заголовка h1 в input с определенным ID при клике по ссылке

Question

Здравствуйте! Есть следующая конструкция:

div {
  background: #f5f5f5;
  margin: 15px;
  padding: 15px;
}

<div class="wrapper">
  <h1>Заголовок страницы</h1>
  <a href="#" class="link"> Заказать</a>
</div>

<div class="form">
  <input placeholder="Наименование" id="pn" type="text">
</div>

Подскажите пожалуйста как без использования jquery, а только с помощью javascript при клике по ссылке с классом link вставить текст из h1 в input с id pn ??

Как должен выглядеть такой скрипт?

Благодарю за ответ!

Answer 1

document.querySelector('a.link').addEventListener('click', () => {
    let h = document.querySelector('h1').textContent;
    document.getElementById('pn').value = h;
})

div {
    background: #f5f5f5;
    margin: 15px;
    padding: 15px;
  }

<div class="wrapper">
    <h1>Заголовок страницы</h1>
    <a href="#" class="link"> Заказать</a>
  </div>
  
  <div class="form">
    <input placeholder="Наименование" id="pn" type="text">
  </div>

Или еще короче и без переменных:

document.querySelector('a.link').addEventListener('click', () => {
    document.getElementById('pn').value = document.querySelector('h1').textContent;
})

БЛОГ НА HUSL

Как добавить текст из заголовка h1 в input с определенным ID при клике по ссылке

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