如何用原生JS实现商品小计与总计计算功能，替代jQuery实现方案

问题原因 #

你原有代码的核心错误有3个：

• input是表单控件，赋值需要用value属性，你使用了innerHTML自然无法生效
• 没有给提交、清除按钮绑定点击事件，函数定义完成后不会被触发
• 没有做数字类型转换和非法输入校验，容易出现NaN异常结果

正确实现方案 #

直接替换你原有所有JS代码即可，不需要修改现有HTML结构：

// 等待DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
  // 绑定提交按钮计算事件
  document.getElementById('submit').addEventListener('click', calculateTotal);
  // 绑定清除按钮清空事件
  document.getElementById('clear').addEventListener('click', clearForm);
  // 如果需要输入数量时实时计算，保留下面这行即可，不需要可以删除
  document.getElementById('q1').addEventListener('input', calculateTotal);
})

// 计算小计和总计的核心函数
function calculateTotal() {
  // 取值后统一转数字类型，非法数量默认按0计算
  const unitPrice = parseFloat(document.getElementById('u1').value);
  const quantity = parseInt(document.getElementById('q1').value) || 0;
  const subTotal = unitPrice * quantity;
  // 保留两位小数符合价格展示规范
  document.getElementById('s1').value = subTotal.toFixed(2);
  document.getElementById('tot').value = subTotal.toFixed(2);
  // 后续如果新增多个商品，只要循环所有商品行累加小计值即可更新总计，不用单独写每个商品的计算逻辑
}

// 清空表单函数
function clearForm() {
  document.getElementById('q1').value = '';
  document.getElementById('s1').value = '';
  document.getElementById('tot').value = '';
}

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