为何input设置type为number且转Number后JavaScript仍识别为字符串？

核心原因：HTML input 元素的value属性固定返回字符串 #

所有<input>元素的value属性的默认返回值都是字符串类型，这是HTML规范的明确规定，和你设置的type属性无关。
你设置type="number"的作用仅为以下几点，不会改变value的返回类型：

• 限制用户输入内容必须符合数字格式，禁止输入普通字符
• 移动端访问时会自动唤起数字输入键盘
• 输入框自带上下箭头可快速微调数值
• 浏览器自带数值合法性校验

你代码中的转换逻辑是正确的 #

你写的a = Number(a)已经完成了字符串到数字类型的转换，正常执行后typeof a的输出应该是number，如果你依然拿到字符串，可排查以下异常场景：

• 检查console.log(typeof a)的位置是不是写在了类型转换代码之前
• 排查是否有其他逻辑在转换后重新给a赋值为字符串类型
• 确认输入内容不是空值：如果输入框为空，Number('')会返回0，依然是数字类型，不会出现字符串

更简洁的替代写法 #

针对type="number"的输入框，你可以直接使用DOM提供的valueAsNumber属性，直接返回数字类型的结果，无需手动转换：

// 直接获取数字类型的输入值
const a = document.getElementById("first_number").valueAsNumber;
const b = document.getElementById("second_number").valueAsNumber;

额外的小bug提示 #

你乘法按钮的回调代码里，输出的文案还是写的The sum of，实际应该改为The product of更符合语义。

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