Button Becomes Visible after counter reaches threshold

November 5, 2022

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>

>Solution :

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>