Задать вопрос
@Poincare
javascript

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

Есть блок 
<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 в соответствующие инпуты формы?
  • Вопрос задан
  • 778 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript 
const containerSelector = '.info';
const buttonSelector = `${containerSelector} button`;
const props = [ 'quantity', 'square', 'floor' ];
const inputs = props.reduce((acc, n) => (acc[n] = document.querySelector(`#${n}`), acc), {});

document.addEventListener('click', ({ target: t }) => {
  if (t.matches(buttonSelector)) {
    const container = t.closest(containerSelector);
    props.forEach(n => inputs[n].value = container.querySelector(`.${n}`).textContent);
  }
});
Ответ написан
3 комментария
3 комментария
Пригласить эксперта
Ответы на вопрос 1
KevlarBeaver
@KevlarBeaver
Разработчик
А в чём суть вопроса? Ну то есть, при совсем базовых знаниях JS это всё очевидным становится.
Нужно повесить обработчик на событие Click кнопки. В обработчике получаем один элемент по id или class, берём его значение и присваиваем другому, какому надо. Ну и всё. На каком этапе возникает проблема?
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Middle JavaScript Developer
AppsTrain.io
от 80 000 до 180 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы