Как с помощью JS перенести текст из блока в значение input другого блока?

Question

[Валентин Мельник]

Есть блок

<div class="info">
	<div class="info-inner">
		<div>
			<p class="quantity">2</p>
		</div>
		<div>
			<p class="square">63,2</p>
		</div>
		<div>
			<p class="floor">2</p>
		</div>
	</div>
	<button>Click</button>
</div>

и форма

<div id="form">
	<form action="" class="contact-info-form" >
		<input name="quantity" id="quantity" type="text" placeholder="Quantity" required="required">
		<input name="square" id="square" type="text" placeholder="Square" required="required">
		<input name="floor" id="floor" type="text" placeholder="Floor" required="required">
		<input name="name" id="name" type="text" placeholder="Name" required="required">
		<input name="phone" id="phone" type="text" placeholder="Phone" required="required">
		<button class="send">Send</button>
    </form>
</div>

Как с помощью JS при клике на кнопку "Click" перенести значения quantity, square, floor в соответствующие инпуты формы?

Answer 1

[0xD34F]

Откуда, что и куда надо переносить:

const containerSelector = '.info';
const buttonSelector = `${containerSelector} button`;
const props = [ 'quantity', 'square', 'floor' ];
const { elements } = document.querySelector('form');

Переносим:

document.addEventListener('click', ({ target: t }) => {
  if ((t = t.closest(buttonSelector)) && (t = t.closest(containerSelector))) {
    props.forEach(n => elements[n].value = t.querySelector(`.${n}`).textContent);
  }
});

или

document.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, ({ currentTarget: t }) => {
  while (!(t = t.parentNode).matches(containerSelector)) ;
  for (const n of props) {
    elements[n].value = t.getElementsByClassName(n)[0].innerText;
  }
});

Comments

[Валентин Мельник]

А если у нас несколько блоков info-inner с разными значениями. Как в этом случае сделать чтобы подставлялись значения того блока, по которому кликнули?

[0xD34F]

обновил ответ

[Валентин Мельник]

Спасибо

Answer 2

[Михаил Макаров]

А в чём суть вопроса? Ну то есть, при совсем базовых знаниях JS это всё очевидным становится.
Нужно повесить обработчик на событие Click кнопки. В обработчике получаем один элемент по id или class, берём его значение и присваиваем другому, какому надо. Ну и всё. На каком этапе возникает проблема?