从多个输入 Javascript 获取多个值 onchange

Question

我试图根据付款类型从收费字段中获取每个值。当 price 和 pay 都有值时，charge 输入字段将是按支付价格填写, and the total amount field will be filled when the type payment option was chosen.

在第二种情况下，当我有多个表格和相同类型的付款（例如现金）时，它会自动将两种费用相加并显示 TOTAL AMOUNT DUE CASH。

这就是我所做的

// extend form
const btn = document.getElementById("add-button");
const formClone = document.querySelector(".clone");
const parentForm = document.querySelector(".wrappers");

btn.addEventListener("click", (e) => {
  e.preventDefault();

  const clone = formClone.cloneNode(true);
  clone.querySelectorAll("input").forEach((e) => {
    e.value = "";
  });
  parentForm.appendChild(clone);

  const deleteForm = document.createElement("button");
  deleteForm.innerText = "X";
  deleteForm.classList.add("btn", "btn-danger", "btn-sm");
  clone.appendChild(deleteForm);

  deleteForm.addEventListener("click", (e) => {
    e.preventDefault();
    e.target.parentElement.remove();
  });
});

const payment = document.querySelector(".type-payment");
const price = document.querySelector(".input-price");
const pay = document.querySelector(".input-pay");
const allInputSum = document.querySelectorAll(".sum");
const inputTotal = document.querySelector(".input-total");

let result;
let totalValue;
function handleSelectChange(event) {
  result = payment.value;
  totalValue = pay.value - price.value;
  inputTotal.value = totalValue.toLocaleString();

  let inputSum = Array.from(allInputSum).filter((e) => {
    if (e.id == result) {
      e.value = inputTotal.value;
    }
  });
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

<button id="add-button" class="btn btn-primary mb-3">Add Form</button>
<div class="wrappers">
  <div class="row clone mb-2">
    <div class="col px-0">
      <div class="input-group mb-2">
        <input
          type="number"
          class="form-control rounded-0 input-price"
          placeholder="Price"
          onchange="handleSelectChange(event)"
        />
      </div>
    </div>
    <div class="col px-0">
      <div class="input-group mb-2">
        <input
          type="number"
          class="form-control rounded-0 input-pay"
          placeholder="Pay"
          onchange="handleSelectChange(event)"
        />
      </div>
    </div>
    <div class="col-auto px-0">
      <div class="input-group mb-2">
        <select
          class="form-control rounded-0 type-payment"
          role="button"
          onchange="handleSelectChange(event)"
        >
          <option value="CASH">CASH</option>
          <option value="DEBIT">DEBIT</option>
          <option value="CASHLESS">CASHLESS</option>
        </select>
      </div>
    </div>
    <div class="col px-0">
      <div class="input-group mb-2">
        <input
          onchange="handleSelectChange(event)"
          value="0.00"
          type="text"
          class="form-control rounded-0 input-total"
          disabled
        />
      </div>
    </div>
  </div>
</div>
<div class="pt-4">
  <div class="row">
    <div class="col-md-8 pr-0">
      <input
        class="form-control total rounded-0"
        disabled
        placeholder="TOTAL CASH"
      />
    </div>
    <div class="col-md-4 pl-0">
      <input
        id="CASH"
        class="form-control rounded-0 sum"
        disabled
        placeholder="0.00"
      />
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 pr-0">
      <input
        class="form-control total rounded-0"
        disabled
        placeholder="TOTAL DEBIT"
      />
    </div>
    <div class="col-md-4 pl-0">
      <input
        id="DEBIT"
        class="form-control rounded-0 sum"
        disabled
        placeholder="0.00"
      />
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 pr-0">
      <input
        class="form-control total rounded-0"
        disabled
        placeholder="TOTAL CASHLESS"
      />
    </div>
    <div class="col-md-4 pl-0">
      <input
        id="CASHLESS"
        class="form-control rounded-0 sum"
        disabled
        placeholder="0.00"
      />
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

抱歉英语不好。先感谢您

Answer 1

你走在正确的轨道上。

问题是在 JavaScript 中克隆一个节点后，它的事件侦听器不会从源元素复制。

在您的情况下，您分配 onChange handleSelectChange 事件的所有输入字段都在克隆节点中丢失了那些事件侦听器。

您所要做的就是在克隆的节点元素中分配 onChange 侦听器。