How can I make my button be clicked under some certain circumstances?

June 30, 2022

I am a beginner into front-end Development and I am trying make this Clicker game. When I press
increase, the value is increasing by 1. After 20 clicks (at my choice), you can press upgrade and
get your clicks doubled. The problem is that after 20 clicks and first upgrade, I can still press upgrade, resetting my score. You can try and see it! I want to create different upgrade points: like first at 20 and increase with 1 click;
2nd at 80 and increase with 2 clicks and so on. Please help

javascript code

let count = 0;
let upgrade = 1;
var snd = new Audio("click.wav");
var upgradeSnd = new Audio("upgrade.wav");

document.getElementById("increase").onclick = function(){
count = count + upgrade;
document.getElementById("value").innerHTML = count;
if(count >= 20)
document.getElementById("upgrade").onclick = function()  {
 count = -2;
 upgrade = 2;
 count += upgrade;
 document.getElementById("value").innerHTML = count;
  }
 }

Html code

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
  </head>
  <body>
  <label type="number" id="value">0</label><br>
  <div class="buttons">
   <button type="button" id="decrease">Decrease</button>
   <button type="button" id="reset">Reset</button>
   <button type="button" id="increase">Increase</button>
   <button type="button" id="upgrade">Upgrade</button>
  </div>

    <script src="index.js"></script>
  </body>
   </html>

CSS CODE

   #value {
    display: flex;
    align-content: center;
    justify-content: center;
    font-size: 50px;
    font-family: Verdana;
    color: yellowgreen;
    }
    
    body {
    background-color: black;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    column-gap: 10px;
    row-gap: 10px;
    margin: auto;
    height: auto;
    width: 100%;
    }

     .buttons {
     display: flex;
     align-items: center;
     justify-content: center;
     column-gap: 20px;
     size: 30px;
     }

     #decrease {
     background-color: yellowgreen;
     width: 90px;
     height: 30px;
     color: black;
     cursor: pointer;

     }

     #increase {
     background-color: yellowgreen;
     width: 90px;
     height: 30px;
     cursor: pointer;
      }

     #reset {
     background-color: yellowgreen;
     width: 90px;
     height: 30px;
     cursor: pointer;
     }

      #upgrade {
     background-color: yellowgreen;
      width: 90px;
     height: 30px;
     cursor: pointer;
     }

>Solution :

I think this is what you want.

This code will check if your count is greater than 20, but make sure you haven’t already clicked that upgrade. It will then minus the upgrade count from your existing count and it won’t work again even if the count after upgrading is high enough. If the count reaches the next upgrade level, the process will repeat again and the number of clicks will again increase by 2. The values can be changed for further upgrade options.

let count = 0;
let upgrade = 1;
var snd = new Audio("click.wav");
var upgradeSnd = new Audio("upgrade.wav");

// Increase and update the count.
document.getElementById("increase").onclick = function () {
    count = count + upgrade;

    document.getElementById("value").innerHTML = count;
};

// Handle upgrade events
document.getElementById("upgrade").onclick = function () {
    // Check if the count is high enough for an upgrade but the upgrade hasn't already happened.
    if (count >= 20 && upgrade < 2) {
        count = count - 20;
        upgrade = 2;
        document.getElementById("value").innerHTML = count;
    } else if (count >= 80 && upgrade < 4) {
        count = count - 80;
        upgrade = 4;
        document.getElementById("value").innerHTML = count;
    }
    // Repeat for however many you want.
};

Hope this helps!