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

Question

我试图根据付款类型从收费字段中获取每个值。 当 price 和 pay 都有值时，charge input 字段将填写 pay - price ，而 total amount 字段将在选择 type payment 选项时填写。

在第二种情况下，当我有多个表格和相同类型的付款（例如现金）时，它会自动将两种费用相加并显示 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事件。

 // 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 = ""; }); clone.querySelector(".type-payment").addEventListener('change', handleSelectChange); clone.querySelector(".input-price").addEventListener('change', handleSelectChange); clone.querySelector(".input-pay").addEventListener('change', handleSelectChange); 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 allInputSum = document.querySelectorAll(".sum"); function handleSelectChange(event) { const forms = document.querySelectorAll(".clone"); const totals = {'CASHLESS': 0, 'DEBIT': 0, 'CASH': 0}; forms.forEach(form => { const payment = form.querySelector(".type-payment"); const price = form.querySelector(".input-price"); const pay = form.querySelector(".input-pay"); const inputTotal = form.querySelector(".input-total"); let totalValue; totalValue = pay.value - price.value; inputTotal.value = totalValue.toLocaleString(); totals[payment.value] += totalValue; }) Array.from(allInputSum).filter((e) => { console.log([e.value, e.id, totals]) e.value = totals[e.id] || 0; }); }

 <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>

试试这个代码，我已经做了你需要的必要的改变。