0

Есть много блоков одинаковых блоков с разными значениями p

<div class="info info1">
  <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 class="info info2">
  <div class="info-inner">
    <div>
      <p class="quantity">5</p>
    </div>
    <div>
      <p class="square">77,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>

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

1 ответ 1

0

Как вариант:

var iQuantity = document.getElementById("quantity");
var iSquare = document.getElementById("square");
var iFloor = document.getElementById("floor");
var btn = document.querySelectorAll("button");

for (var i = 0; i < btn.length; i++) {
  btn[i].addEventListener("click", (e) => {
    iQuantity.value = e.currentTarget.closest(".info").querySelector("p.quantity").textContent;
    iSquare.value = e.currentTarget.closest(".info").querySelector("p.square").textContent;
    iFloor.value = e.currentTarget.closest(".info").querySelector("p.floor").textContent;
  });
}
<div class="info info1">
  <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 class="info info2">
  <div class="info-inner">
    <div>
      <p class="quantity">5</p>
    </div>
    <div>
      <p class="square">77,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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.