如何避免页面加载和DOM变更时重复执行JS计算器的更新代码

将重复的摘要框更新逻辑抽离为独立的公共函数，分别在输入事件绑定、页面初始化两个场景复用即可，完全消除重复代码，后续修改逻辑只需调整一处。
额外优化建议：推荐将keyup事件替换为input事件，可覆盖用户粘贴、鼠标调整输入框数值、右键剪切修改等所有输入值变动场景，适配更多用户操作习惯。

修改后完整代码如下：

// 封装独立的摘要更新逻辑
function updateSummary() {
  invDisplay.innerText = `£${investment.value}`;
  netProfit.innerText = `£${grossProfitLoss()}`;
  invFeeDisplay.innerText = `£${withInvFee()}`;
  netProfitLossDisplay.innerText = `£${netProfitDisplay()}`;
}

// 输入框元素数组
const innerElementsArr = [investment, buying, selling, invFee];

// 为所有输入框绑定值变动事件
innerElementsArr.forEach(item => {
  // 如需保留原keyup事件可替换回去，input事件覆盖场景更全面
  item.addEventListener('input', updateSummary);
});

// 页面加载完成后主动调用一次，完成初始值的摘要渲染
updateSummary();

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