Как с помощью 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.matches(buttonSelector)) {
    props.forEach(function(n) {
      elements[n].value = this.querySelector(`.${n}`).textContent;
    }, t.closest(containerSelector));
  }
});

Comments

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

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

[0xD34F]

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

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

Спасибо

Answer 2

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

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