使用JS实现两个输入框值求和功能运行异常如何解决？

代码存在两个核心错误： #

• document.getElementsByClassName() 返回的是HTMLCollection元素集合，不是单个DOM元素，必须指定索引（此处取第一个匹配元素即[0]）才能读取value、修改innerHTML属性，直接调用属性会得到undefined导致逻辑失效。
• 数值转换时机错误：输入框读取的value默认是字符串类型，先做+操作会执行字符串拼接而非数值相加，需要先分别将两个输入值转为数值类型，再执行加法运算。

修复后可运行的完整代码： #

<input class="field1" type="text">
<input class="field2" type="text">
<p class="field3"></p>
<button onclick="calculate()">Calculate</button>

<script>
function calculate(){
  // 取集合第一个元素再读value
  let ipt1 = document.getElementsByClassName("field1")[0].value;
  let ipt2 = document.getElementsByClassName("field2")[0].value;
  let results = document.getElementsByClassName("field3")[0];
  // 先分别转数值再相加
  let total = Number(ipt1) + Number(ipt2);
  results.innerHTML = total;
}
</script>

内容的提问来源于stack exchange，提问作者Ganda W Maung