如何仅使用纯JavaScript实现输入值实时计算并同步更新到总ID元素

1. 修复事件绑定错误 #

你当前代码绑定的是document.getElementById("input")的onkeyup事件，但你的HTML结构中不存在id为input的元素，所以输入时calc()函数根本不会触发，这是计算不更新的核心原因。
正确做法是给所有数值输入框统一绑定事件，可以用选择器选中所有type为number的输入框，逐个绑定input事件（比keyup兼容性更好，覆盖键盘输入、点击增减器、粘贴等所有输入场景）。

2. 修正parseInt参数错误 #

parseInt的第二个参数是进制数，必须传入整数10表示按十进制解析，你传空字符串会导致解析异常，甚至得到NaN，最终总和也会变成NaN。

3. 补充单位换算逻辑 #

你当前的代码直接把不同单位的数值相加，逻辑是错误的：

• 周单位的数值需要乘以52换算为年用量
• 月单位的数值需要乘以12换算为年用量
• 每个输入的data-weight属性是单份的重量，需要乘以对应数量才能得到最终的kg数值

4. 修复重复计算问题 #

当前总和计算里in_yogurt被加了两次，属于笔误需要删掉重复项。

5. 补充重置按钮功能 #

你提到做了重置功能但代码里没体现，需要给id为reset的按钮绑定点击事件，把所有输入框的值设为0后重新计算。

document.addEventListener('DOMContentLoaded', function(event) {
  // 选中所有数值输入框
  const allInputs = document.querySelectorAll('input[type="number"]');
  // 给每个输入框绑定input事件，触发计算
  allInputs.forEach(input => {
    input.addEventListener('input', calc);
  });

  // 绑定重置按钮事件
  document.getElementById('reset').addEventListener('click', () => {
    allInputs.forEach(input => {
      input.value = 0;
    });
    calc();
  });

  function calc(){
    // 按十进制解析数值，默认值设为0避免NaN
    const in_bottles = parseInt(document.getElementById('in_bottles').value, 10) || 0;
    const in_bags = parseInt(document.getElementById('in_bags').value, 10) || 0;
    const in_wrapping = parseInt(document.getElementById('in_wrapping').value, 10) || 0;
    const in_yogurt = parseInt(document.getElementById('in_yogurt').value, 10) || 0;
    const in_takeout = parseInt(document.getElementById('in_takeout').value, 10) || 0;
    const in_cups = parseInt(document.getElementById('in_cups').value, 10) || 0;
    const in_packaging = parseInt(document.getElementById('in_packaging').value, 10) || 0;
    const in_detergent = parseInt(document.getElementById('in_detergent').value, 10) || 0;
    const in_shampoo = parseInt(document.getElementById('in_shampoo').value, 10) || 0;
    const in_toothbrushes = parseInt(document.getElementById('in_toothbrushes').value, 10) || 0;
    const in_toothpaste = parseInt(document.getElementById('in_toothpaste').value, 10) || 0;

    // 单位换算+乘重量计算总重量，若作业仅要求统计数量可自行调整计算逻辑
    const total = 
      (in_bottles * 0.730 * 52) +
      (in_bags * 0.417 * 52) +
      (in_wrapping * 0.583 * 52) +
      (in_yogurt * 0.383 * 52) +
      (in_takeout * 0.383 * 12) +
      (in_cups * 0.240 * 12) +
      (in_packaging * 0.834 * 12) +
      (in_detergent * 0.120) +
      (in_shampoo * 0.080) +
      (in_toothbrushes * 0.020) +
      (in_toothpaste * 0.015);

    // 保留两位小数展示更友好
    document.getElementById('total_per_year').innerHTML = total.toFixed(2);
  }
});

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