Check if button pressed with if statement in JS

Question

I am trying to make a simple clicker game, I am trying to implement an upgrade system, but I want the upgrade to stop generating when I press the reset button. Any ideas how I could do this?

const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const spnElement = document.getElementById("span");
let score = 1;

btnElement2.addEventListener("click", () => {
  if (score < 10) {
    console.log("poor");
  } else if (score >= 10) {
    var interval = setInterval(increment, 1000);

    function increment() {
      score = score % 360 + 1;
      spnElement.innerText = score;
    }
  }
})

btnElement.addEventListener("click", () => {
  spnElement.innerText = score++;
})

btnElement1.addEventListener("click", () => {
  spnElement.innerText = 0;
  score = 1;
})

document.body.addEventListener("keyup", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score++;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Space") {
    spnElement.innerText = score;
  }
})

document.body.addEventListener("keydown", function(event) {
  if (event.code === "Enter") {
    spnElement.innerText = 0;
    score = 1;
  }
})

body {
  background-color: lightblue;
  color: #333;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  background-color: lightcyan;
  position: absolute;
  right: 0;
  top: 0px;
  margin: 0px;
  border-width: 2px;
  border-bottom-width: 2px;
  border-bottom-color: whitesmoke;
  border-bottom-style: solid;
  width: 100.09%;
}

#btns {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}

.btns {
  background-color: lavender;
  color: #333;
  border-width: 1px;
  border-color: palegreen;
  border-radius: 5px;
}

.btns:hover {
  background-color: mediumpurple;
}

#text {
  text-align: center;
}

<div id="header">
  <div id="text">
    <h1>Clicker</h1>
    <h2><span id="span">0</span></h2>
  </div>
  <div id="btns">
    <button id="btn" class="btns">+</button>
    <button id="btn1" class="btns">Reset</button>
    <button id="btn2" class="btns">Skibidi 1 (10 clicks)</button>
  </div>
</div>

This was my attempt using all that I could find online

I added this if statement to see if it would work, I was just wondering mainly if there was a way to check whether a button has been pressed or not in an if statement

if (btnElement1.addEventListener("click", (any))){
    return;
}

Answer 1

You can use the event listener callback.

btnElement1.addEventListener("click", callbackFn);

When you use addEventListener on btnElement1 and subscribe to event click, it will call the provided callbackFn whenever someone clicks on btnElement1.

So, you can implement your logic inside callbackFn that you were planning to write inside if statement.

For example, using an arrow function as callback that receives an event object containing element info where click was performed:

btnElement1.addEventListener("click", (event) => {
    //write your logic here
});

If you need to stop the score from increment on reset, you can use clearTimeout. You need to declare the timer variable at top and use it on btnElement1 click to clear the timer.

const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const spnElement = document.getElementById("span");
let score = 1;

let intervalTimer;

btnElement2.addEventListener("click", () => {
    if (score < 10){
        console.log("poor");
    }
    else if (score >= 10){
        intervalTimer = setInterval( increment, 1000);

        function increment(){
            score = score % 360 + 1;
            spnElement.innerText = score;
        }
    }
})


btnElement1.addEventListener("click", () => {
    spnElement.innerText = 0;
    score = 1;
    // clear the timer
    clearTimeout(intervalTimer)
})