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

Question

我从输入类型number中获取了两个值，但结果显示不好

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即可添加该元素。

Answer 2

尽管控件的类型是number，但实际输入的类型是string。因此，字符串连接(即，'2' + '3' = '23')正在发生。在执行加法之前，您必须将这些值转换为number。要从控件中获取当前值，还必须访问函数内部的值：

​

const subtotal = document.querySelector(".total");

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

<input type="number" class="price"/>
<input type="number" class="items"/>
<button type="button" class="total">Total</button>

​

Answer 3

您必须在事件侦听器中执行所有这些逻辑，以便即使输入值发生更改也可以读取它们，并根据当前输入值计算结果。

为sum声明一个函数也很好，这样您就可以在需要的任何地方重用它。

​

function sum(a,b) {
    return Number(a) + Number(b);
}

const btn = document.querySelector(".btn");

btn.addEventListener('click', function(){

    const price = document.querySelector(".price").value;
    const items = document.querySelector(".items").value;

    document.querySelector(".total").innerText = sum(price, items);
});

<input type="text" class="price">
<input type="text" class="items">
<button class="btn">SUM</button>
<div class="total"></div>

​