为什么这个脚本不能将数字类型输入的值添加到整数变量中?

Question

我有一个配置产品的表单，当每个选择被选中时，它会更新总成本。大部分都是有效的，除了一个可变输入——交付成本与里程直接相关。当我输入一个正数然后打勾时，总价值没有变化，我不知道为什么。我应该注意到，我之前在某种程度上让它工作，但它没有逻辑来处理负输入;当我添加比较时，它停止工作，所以我认为它可能在比较里程>= 0时无法返回True。

let total = 12000;
let mileage = "document.getElementById('delivery-mileage').value";
[...document.getElementsByClassName('form-check-input has-value')].forEach(function(item) {
  item.addEventListener('click', function(e) {
      if (e.target.id == "delivery"){
        if (parseInt(mileage, 10) >= 0) {
        if (e.target.checked) {
          total += parseInt(mileage, 10)
        } else {
          total -= parseInt(mileage, 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="suitcase">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" style="max-width: 1000px;">
    <h2 id="total">Total Cost: <span id="total-cost">$12,000.00</span> plus tax</h2>
  </div>
  </div>
</div>

Answer 1

不知道你从哪里学来的

let mileage = "document.getElementById('delivery-mileage').value";

但是所有这些都是将里程设置为字符串。它并没有神奇地引用DOM值。

你需要把它改成

const mileageElem = document.getElementById('delivery-mileage');

当你需要这个值时，你需要读取它

item.addEventListener('click', function(e) {
  const mileage = mileageElem.value;
  ...
});