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

获得不可靠输出的原因有两个：

您只能一次获得值，因此调用该函数时更新的值将是错误的。
您正在将字符串串联在一起，而不是添加字符串。例如：'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'）。在执行加法之前，必须将值转换为数字。要从控件中获取当前值，您还必须访问函数内部的值：

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>

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

3 个答案: