如何使用JavaScript实现两个文本输入框的数值相乘？

原代码的问题点 #

• DOM方法错误：不存在getElementsById这个API，正确获取单个id元素的方法是getElementById（id是页面唯一标识，所以方法为单数形式）
• 未实现绑定的事件函数：输入框绑定了calculvente()，但代码里完全没定义这个函数，触发事件时会直接报错
• 代码执行时机错误：页面加载时就获取输入框的值，此时用户还未输入内容，拿到的是空字符串，无法完成有效计算
• 重复id问题：输出区域的div和input都用了id="c"，HTML规范要求id必须唯一，会导致DOM元素获取出错
• 冗余无关代码：代码里的select相关逻辑和“两数相乘”的需求完全无关，属于无效代码
• HTML结构错误：</body>标签提前闭合，导致后面的输出div不在body范围内，不符合页面结构规范
• 类型未处理：输入框的值默认是字符串类型，直接相乘可能出现非预期结果（比如空字符串转成0、非数字内容转成NaN）

正确实现代码 #

<!DOCTYPE html>
<html>
<body>
<div id="input-group">
  <p>Diameter (mm):</p>
  <input type="text" id="diameter" name="diameter" onblur="calculateProduct()">
  <p>Width (mm):</p>
  <input type="text" id="width" name="width" onblur="calculateProduct()">
</div>
<div id="output-group">
  <p>Calculation Result:</p>
  <input type="text" id="result" readonly>
</div>

<script>
function calculateProduct() {
  // 获取输入值并转为数字，空值或非数字内容默认设为0
  const diameter = parseFloat(document.getElementById('diameter').value) || 0;
  const width = parseFloat(document.getElementById('width').value) || 0;
  // 计算乘积
  const product = diameter * width;
  // 将结果赋值到输出框
  document.getElementById('result').value = product;
}
</script>
</body>
</html>

关键说明 #

• 将事件函数命名为语义化的calculateProduct，并把计算逻辑放在函数内部，确保每次输入框失去焦点时，都会重新获取最新输入值进行计算
• 使用parseFloat把输入的字符串转为数字，同时通过|| 0处理空值或非数字输入，避免出现NaN结果
• 输出框添加readonly属性，防止用户手动修改计算结果
• 修正了HTML结构，确保所有元素都在<body>标签内，且id唯一
• 移除了和需求无关的冗余代码

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