money display won't update-CodePudding

When clicking id="bigButton" It's not updating the amount of money I have. Anyone know why?

var money = 50
    var stickAmount = 0
    var clickValue = 1   stickAmount
    window.onload = displayMoney();
    function displayMoney() {
        document.getElementById('totalCurrentMoney').innerHTML = "$"   money;
        document.title = "$"   money   " - Arsenal Clicker";
    }
    function click() {
        money = money   clickValue
        displayMoney()
    }
    function purchaseStick() {
        money = money - 50
        stickAmount = stickAmount   1
        displayMoney()
    }

.card-arangement {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

<div>
    <h1 align="center">Arsenal Clicker</h1>
    <h1 id="totalCurrentMoney" align="center">$5</h1>
    <div class="card-arangement">
        <input type="image" id="bigButton" onclick="click()" src="Images/bigButton.png" height="500">
        <div>
            <input type="image" id="stick" onclick="purchaseStick()" src="Images/stick.png" height="100">
            <input type="text" id="stick" onclick="purchaseStick()" disabled placeholder="stick - $50" height="100">
        </div>
    </div>
</div>

CodePudding user response：

The function click() is already defined on an input, and gets a higher priority than your method.

So, rename click() function name to updateMoney

<input type="image" id="bigButton" onclick="updateMoney()" src="Images/bigButton.png" height="500">

function updateMoney() {
    money = money   clickValue
    displayMoney()
 }