JS调用onclick函数累加营收仅首次生效，如何修复实现累计计算？

问题根因 #

你的代码存在4个核心逻辑错误，导致累加营收不生效：

• 每次调用incrementValueRevenue()时都重新初始化JSON和价格对象，局部变量在函数执行结束后就会销毁，上次的计算结果完全没有留存
• 没有读取原有总营收的值做累加，而是直接把单价覆盖赋值给总营收输入框，所以不管点多少次都只会显示单价35
• 从input元素读取的value默认为字符串类型，未做类型转换直接做数值运算会出现不可预期的结果
• 最后一行对myObj.price的累加操作完全无效，下一次函数调用时会重新生成全新的价格对象，该值不会被复用

修正后代码 #

JS代码

function incrementValue() {
    // 先转数值，空值默认取0避免运算错误
    const value = Number(document.getElementById('items-sold').value) || 0;
    document.getElementById('items-sold').value = value + 1;
}

function incrementValueRevenue() {
    // 固定单价可提前提取，避免重复解析JSON，若单价为动态获取可保留原JSON解析逻辑，取到数值即可
    const UNIT_PRICE = 35;
    // 读取当前已有的总营收，转数值
    const currentRevenue = Number(document.getElementById('total-revenue').value) || 0;
    // 累加单价后赋值回去
    document.getElementById('total-revenue').value = currentRevenue + UNIT_PRICE;
}

HTML补充说明

你需要给items-sold和total-revenue两个输入框设置初始值value="0"，避免首次取值为空：

<form>
  <input type="text" id="items-sold" value="0" readonly>
  <input type="text" id="total-revenue" value="0" readonly>
  <input type="button" onclick="incrementValue(); incrementValueRevenue();" value="+" />
</form>

修改后点击3次按钮，已售商品数会显示3，总营收会显示105，符合预期。

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