现代javascript中输入类型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);
});

---

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

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

您将字符串连接在一起，而不是添加字符串。例如：

'5'+'2'='52'

您应该在函数中获取值，因为它们可能会更改，并且您应该在添加值之前将值转换为数字。您还应该为特定元素使用ID，而不是类：

const subtotal=document.getElementById（“总计”）
小计.addEventListener（'click'，函数（）{
常量价格=+document.getElementById（“价格”）.value，
items=+document.getElementById（“items”）.value，
a=价格+项目
控制台日志（a）
});

添加
尽管控件的类型为数字，但实际输入的类型为字符串。因此，字符串串联（即，
'2'+'3'='23'
）正在发生。在执行加法之前，必须将值转换为数字。要从控件中获取当前值，还必须访问函数中的值：


const subtotal=document.querySelector（“.total”）；
小计.addEventListener（'click'，函数（）{
const price=document.querySelector（“.price”）.value；
const items=document.querySelector（“.items”）.value；
console.log（价格类型）；//字符串
常数a=数量（价格）+数量（项目）；
控制台日志（a）；
});

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

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


函数和（a，b）{
返回编号（a）+返回编号（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=总和（价格、项目）；
});

总和
常数a=数量（价格）+数量（项目）html是什么样子，你输入的是什么数字？另外，最终记录的输出是什么？您知道您是在页面加载时读取值，而不是在单击页面时读取值。点击上方的代码不会神奇地更新。这应该很容易放入可运行的代码片段中，以演示问题。您愿意这样做吗？“但结果显示不好”请详细说明问题并向我们显示您遇到的任何错误
querySelector（）
将返回第一个匹配的元素，
document.querySelector（.price”）.value
@Mamun是的，您是对的，我忘了这一点，但是使用ID是更好的做法，因为您的代码不能正常工作。此外，我认为不需要求和函数。写
sum（4，3）
比写
4+3
需要更多的字符。谢谢@Kobe有个bug。关于函数，我并没有试图用尽可能少的字符来解决问题，而是尽可能地使它成为最好的。如何使用求和函数比通常写出来更好呢？我在回答中已经说过，函数可以在代码中稍后重用。我正在考虑一个比问题中显示的场景更广阔的场景，这可能是事实。