点击id=bigButton按钮时页面金钱显示不更新问题求助

问题原因 #

• 你自定义的函数命名为click，在元素onclick属性的执行上下文里，会优先触发DOM元素内置的HTMLElement.click()原生方法，不会调用你自己写的全局click函数，所以点击后逻辑完全没执行。
• 额外隐藏问题：clickValue是初始化时一次性计算的固定值，后续stickAmount增加后clickValue不会自动更新，后续升级道具后点击收益不会生效。
• 代码规范问题：两个元素使用了重复的id="stick"，id在DOM中必须唯一。

修复方案 #

1. 重命名自定义点击函数，避免和原生方法重名
2. 将clickValue改为动态计算，每次点击/升级道具时自动获取最新值
3. 修正重复id问题

修正后JS代码 #

var money = 50
var stickAmount = 0
window.onload = displayMoney();
function displayMoney() {
    document.getElementById('totalCurrentMoney').innerHTML = "$" + money;
    document.title = "$" + money + " - Arsenal Clicker";
}
// 重命名函数，避免和原生click方法冲突
function handleBigButtonClick() {
    // 每次点击动态计算当前收益
    const currentClickValue = 1 + stickAmount
    money = money + currentClickValue
    displayMoney()
}
function purchaseStick() {
    money = money - 50
    stickAmount = stickAmount + 1
    displayMoney()
}

修正后HTML代码 #

<div>
    <h1 align="center">Arsenal Clicker</h1>
    <h1 id="totalCurrentMoney" align="center">$5</h1>
    <div class="card-arangement">
        <!-- 绑定重命名后的点击函数 -->
        <input type="image" id="bigButton" onclick="handleBigButtonClick()" src="Images/bigButton.png" height="500">
        <div>
            <!-- 修正重复id -->
            <input type="image" id="stickImg" onclick="purchaseStick()" src="Images/stick.png" height="100">
            <input type="text" id="stickInput" onclick="purchaseStick()" disabled placeholder="stick - $50" height="100">
        </div>
    </div>
</div>

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