javascript - 在现代 javascript 中求和输入类型数字的两个值

Question

我从输入类型数字中得到两个值，但结果显示不正确

const price = document.querySelector(".price").value;
const items = document.querySelector(".items").value;
const a = price + items;
const subtotal = document.querySelector(".total");
subtotal.addEventListener('click', function(){
    console.log(a);
});

Answer 1

你得到一个不可靠的输出的原因有两个:

1. 您只获取一次值，因此在您调用函数时更新的值将不正确。

2. 您是将字符串连接在一起，而不是添加字符串。例如:'5' + '2' = '52'

您应该在函数内部获取值，因为它们可能会发生变化，并且您应该在添加它们之前将这些值转换为数字。您还应该对特定元素使用 ID 而不是类:

const subtotal = document.getElementById("total")

subtotal.addEventListener('click', function() {
  const price = +document.getElementById("price").value,
    items = +document.getElementById("items").value,
    a = price + items
  console.log(a)
});

<input type="number" id="price" value=5>
<input type="number" id="items" value=2>
<button id="total">Add</button>

您可以像这样更好地编写此函数:

const subtotal = document.getElementById("total")

subtotal.addEventListener('click', () => console.log(['price', 'items']
  .reduce((a, id) => a + +document.getElementById(id).value, 0)
))

<input type="number" id="price" value=5>
<input type="number" id="items" value=2>
<button id="total">Add</button>

使用这种方法，您只需向列表中添加一个 ID 即可添加该元素。