Button Becomes Visible after counter reaches threshold-CodePudding

I am trying to make a simple clicker game that you try and generate money through clicking a button. And I want a upgrade button to become visible after you have $10.

Here is the code:

var money = 0
const addMoneyButton = document.getElementById('Clicker')

const addMoney = () => {
  money  = 1
  document.getElementById("money").innerHTML = money
  console.log(money)

  function upgrade1() {
    var upgrade1 = document.getElementById('upgrade1')
    if (money > 10) {
      upgrade1.style.visibility = 'visible'
    }
  }
}

addMoneyButton.addEventListener("click", addMoney)

<button id="Clicker">Click To Begin Making Money</button>
<br>
<button id='upgrade1' style="visibility:hidden;">Upgrade Money Amount</button>
<h1>Money Amount: <span id='money'></span></h1>

CodePudding user response：

You forgot to call your function:

var money = 0
const addMoneyButton = document.getElementById('Clicker')

const addMoney = () => {
  money  = 1
  document.getElementById("money").innerHTML = money
  console.log(money)

  function upgrade1() {
    var upgrade1 = document.getElementById('upgrade1')
    if (money > 10) {
      upgrade1.style.visibility = 'visible'
    }
  }
  // here!
  upgrade1()
}

addMoneyButton.addEventListener("click", addMoney)

<button id="Clicker">Click To Begin Making Money</button>
<br>
<button id='upgrade1' style="visibility:hidden;">Upgrade Money Amount</button>
<h1>Money Amount: <span id='money'></span></h1>

CodePudding user response：

You can shorten your code to this:

const clicker = document.getElementById('Clicker');
const upgrade1 = document.getElementById('upgrade1');
const money = document.getElementById('money');

let count = 0;
clicker.addEventListener('click', () => {
  money.textContent =   count;
  if (count > 10) upgrade1.style.visibility = 'visible';
});

<button id="Clicker">Click To Begin Making Money</button>
<button id='upgrade1' style="visibility:hidden;">Upgrade Money Amount</button>
<h1>Money Amount: <span id='money'></span></h1>