如何最有效地捕获和处理用户与此表单元素交互的所有情况？

Question

我正在努力用我平庸的JavaScript技能解决一个设计问题。我有一个用于订购定制产品的产品配置表单—大多数表单元素都有一个静态价格，当它们被选中/未选中时，它会被添加或从总数中减去。最后一个元素是交付里程，它是一个动态数字，用户可以输入该数字并勾选/取消勾选他们希望包含的内容。我正在努力寻找最好的方式来安排这个逻辑。如果您先输入里程，然后勾选复选框，那么我之前的尝试将正确更新，但是如果您先勾选，然后再输入里程，则无法捕获。所以我尝试了一个on-blur事件捕获，但是当你选中这个框，输入里程，模糊，然后再次更改里程和模糊时，它会再次添加。

这是我对整个表单(短脚本)和相关HTML的逻辑:

let total = 12000;
const mileageElem = document.getElementById('delivery-mileage');
let updateVal = 0;
document.getElementById('delivery-mileage').addEventListener('blur', function () {
const check = document.getElementById('delivery');
let mileage = mileageElem.value;
if (parseInt(mileage, 10) >= 0) {
if (check.checked) {
total += parseInt(mileage, 10)
} else {
total -= parseInt(mileage, 10)
}
}
document.getElementById('total-cost').innerHTML = `$${total.toLocaleString("en-US")}.00`;
});
[...document.getElementsByClassName('form-check-input has-value')].forEach(function(item) {
item.addEventListener('click', function(e) {
if (e.target.id == "delivery"){
//     let mileage = mileageElem.value;
//     if (parseInt(mileage, 10) >= 0) {
//     if (e.target.checked) {
//       updateVal = mileageElem.value;
//       total += parseInt(updateVal, 10)
//     } else {
//       total -= parseInt(updateVal, 10)
//     }
//   }
}
else{
if (e.target.checked) {
total += parseInt(e.target.value, 10)
} else {
total -= parseInt(e.target.value, 10)
}
}
document.getElementById('total-cost').innerHTML = `$${total.toLocaleString("en-US")}.00`
})
});

document.addEventListener('click', e=> {
console.log(e.target);
})

<div class="row">
<div class="col" style="max-width: 1000px;">
<input class="form-check-input has-value" type="checkbox" name="delivery" id="delivery">
<label class="form-check-label" for="delivery">Delivery to a distance of...<p class="price">$1/mile</p></label>
<input type="number" class="form-control" id="delivery-mileage" placeholder="Miles to deliver" style = "width: 200px;">
</div>
</div>

<div class="row">
<div class="col-sm" style="max-width: 1000px;">
<h2 id="total">Total Cost: <span id="total-cost">$12,000.00</span> plus tax</h2>
</div>
<div class="d-grid gap-2 col-4 mx-auto">
<button class="btn btn-outline-success text-nowrap" type="button">Let's Go!</button>
</div>
</div>

Answer 1

这是可行的，您需要为交付费用保留一个单独的变量:

let total = 12000;
let delivery = 0;
let updateVal = 0;
const inputBox = document.querySelector('#delivery-mileage');
const check = document.querySelector("#delivery");
const totalBox = document.getElementById('total-cost');
inputBox.addEventListener('blur', function(event) {
let mileage = event.target.value;
delivery = 0;
if (+mileage >= 0) {
if (check.checked) {
delivery = +mileage;
}
}
totalBox.innerHTML = `$${(total+delivery).toLocaleString("en-US")}.00`;
});
check.addEventListener('click', function(e) {
delivery = 0;
if (e.target.checked) {
delivery = +inputBox.value;
}
totalBox.innerHTML = `$${(total+delivery).toLocaleString("en-US")}.00`
});

<div class="row">
<div class="col" style="max-width: 1000px;">
<input class="form-check-input has-value" type="checkbox" name="delivery" id="delivery">
<label class="form-check-label" for="delivery">Delivery to a distance of...<p class="price">$1/mile</p></label>
<input type="number" class="form-control" id="delivery-mileage" placeholder="Miles to deliver" style="width: 200px;">
</div>
</div>
<div class="row">
<div class="col-sm" style="max-width: 1000px;">
<h2 id="total">Total Cost: <span id="total-cost">$12,000.00</span> plus tax</h2>
</div>
<div class="d-grid gap-2 col-4 mx-auto">
<button class="btn btn-outline-success text-nowrap" type="button">Let's Go!</button>
</div>
</div>