如何在JavaScript中对表单输入值进行算术运算？

为什么会出现字符串拼接而非加法？ #

不管你把输入框的type设为number还是text，输入框的value属性返回的始终是字符串类型。你原代码里的eval(thing.inputa.value + thing.inputb.value)，实际是先把两个字符串拼接成新字符串（比如输入1和2就变成"1"+"2"即"12"），再让eval执行这个字符串，结果自然是拼接后的内容，而非数学加法。

修复方法 #

方法1：转换输入值为数字后相加（推荐，更安全）

直接把输入的字符串转换成数字再执行加法，无需使用eval：
修改按钮的onclick代码为：

thing.output2.value = Number(thing.inputa.value) + Number(thing.inputb.value)

如果需要处理浮点数，可用parseFloat；如果确定是整数，用parseInt：

// 处理浮点数
thing.output2.value = parseFloat(thing.inputa.value) + parseFloat(thing.inputb.value)
// 处理整数（第二个参数10是指定十进制）
thing.output2.value = parseInt(thing.inputa.value, 10) + parseInt(thing.inputb.value, 10)

方法2：调整eval写法（不推荐，存在安全风险）

如果一定要用eval，需让它执行合法的加法表达式，而非字符串拼接：

// 方式1：分别解析两个输入值后相加
thing.output2.value = eval(thing.inputa.value) + eval(thing.inputb.value)
// 方式2：拼接成标准加法表达式
thing.output2.value = eval(`${thing.inputa.value} + ${thing.inputb.value}`)

⚠️ 注意：eval会执行任意字符串代码，若用户输入恶意内容会有安全隐患，实际项目中尽量避免使用。

带合法性判断的完整示例代码 #

<form name="thing" id="calculator">
  A 
  <input type="number" name="inputa" size="16" class="display">
  <br>
  B 
  <input type="number" name="inputb" size="16" class="display">

  <input type="button" 
         name="dothething" 
         value="add them" 
         onclick="const a = Number(thing.inputa.value); const b = Number(thing.inputb.value); thing.output2.value = isNaN(a) || isNaN(b) ? '请输入有效数字' : a + b"
         >
  <br>
  A+B=
  <input type="text" name="output2" size="16" class="display">
</form>

这个示例新增了输入合法性判断，若输入非数字会提示错误信息。

内容的提问来源于stack exchange，提问作者Oster