JS实现食谱配料按份数计算时仅数组最后一项生效问题求助

• 重复覆盖点击事件：你在for循环内反复给refresh-portion按钮的onclick属性赋值，每一轮循环都会把上一轮绑定的点击处理逻辑覆盖，最终只有最后一轮循环绑定的处理函数会生效，自然只会更新最后一项配料的数值。
• 变量作用域问题：你用var声明循环变量，没有块级作用域，再加上闭包的引用特性，所有点击处理函数引用的elem、initial变量最终都指向最后一轮循环的取值，就算你改成绑定多个事件也只会更新最后一项。

优化思路：只给刷新按钮绑定1次点击事件，提前缓存所有配料的初始值，点击触发时统一遍历所有配料项计算新数值即可。

var refresh = document.getElementById("refresh-portion");
var zutatendata = document.getElementsByClassName("zutaten-data");
// 提前缓存所有配料的初始值
var initialValues = Array.from(zutatendata).map(elem => Number(elem.innerHTML));

// 只绑定一次点击事件
refresh.onclick = function() {
  var input = Number(document.getElementById("custom-portion").value);
  // 非合法输入防护
  if (isNaN(input) || input <= 0) {
    alert('请输入正确的份数');
    return;
  }
  // 遍历所有配料项计算新值
  for (var i = 0; i < zutatendata.length; i++) {
    var result = initialValues[i] * input;
    if (result.toString().length > 5) {
      result = result.toFixed(1);
    }
    zutatendata[i].innerHTML = result + " ";
  }
}

• 默认状态：
• 调整份数后效果：

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