Копировать данные из текстового поля в input

Question

Интересует вопрос, как копировать данные из текстового поля (h1,h1,p и т.д.) в значение Input. Есть код,

<div class="profile__info">
  <h1 class="profile__name">Жак-Ив Кусто</h1>
  <p class="profile__vocation">Исследователь океана</p>
  <button class="profile__edit-button" type="button" title="Редактировать профиль">Button</button>
</div>
И

<div class="popup__text">
  <input name="text" placeholder="Укажите Ваше имя" class="popup__text-name" maxlength="35"></input>
  <input type="text" placeholder="Ваша профессия" class="popup__text-vocation" maxlength="35"></input>
</div>

И надо, чтобы первый и второй input копировали текст h1 и p соответственно. div popup__text у меня спрятан и открывается по кнопке, и мне нужно чтобы input всегда копировал данные из текста, не по нажатию кнопки и я вот совсем не могу понять как это реализовать через JavaScript.

Answer 1

const textName = document.querySelector('.profile__info .profile__name');
const textProfession = document.querySelector('.profile__info .profile__vocation');

const inputName = document.querySelector('.popup__text .popup__text-name');
const inputProfession = document.querySelector('.popup__text .popup__text-vocation');

inputName.value = textName.textContent;
inputProfession.value = textProfession.textContent;

<div class="profile__info">
  <h1 class="profile__name">Жак-Ив Кусто</h1>
  <p class="profile__vocation">Исследователь океана</p>
  <button class="profile__edit-button" type="button" title="Редактировать профиль">Button</button>
</div>
И

<div class="popup__text">
  <input name="text" placeholder="Укажите Ваше имя" class="popup__text-name" maxlength="35"></input>
  <input type="text" placeholder="Ваша профессия" class="popup__text-vocation" maxlength="35"></input>
</div>

БЛОГ НА HUSL

Копировать данные из текстового поля в input

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