How do I stop a click event using conditionals in vanilla JS?

Question

I'm just starting to learn JavaScript and this is an assignment, so everything must be done with vanilla JS only. I have to make an up/down counter that goes up when you click + and down when you click - . Here's my code, we are required to use event listeners:

var currentNumberWrapper = document.getElementById("currentNumber");
var currentNumber = 0;
const adicionar = document.getElementById("adicionar");
const subtrair = document.getElementById("subtrair");
var mensagem = document.getElementById("mensagem");
adicionar.addEventListener("click", function() {
  currentNumber++;
  currentNumberWrapper.innerHTML = currentNumber;
});
subtrair.addEventListener("click", function() {
  currentNumber--;
  currentNumberWrapper.innerHTML = currentNumber;
});

<h1>Olá, mundo!</h1>
<p>Este é meu primeiro projeto JavaScript.</p>

<div id="counter">
  <button name="subtrair" id="subtrair" onClick="decrement()">-</button>
  <span id="currentNumber">0</span>
  <button name="adicionar" id="adicionar" onclick="increment()">+</button>
</div>
<p id="mensagem">
  <em>Clique nos botões para aumentar ou diminuir o número mostrado.</em>
</p>

This part works just fine. However, in the second part of the assignment, we're supposed to stop the counter after a condition has been met, for example, if currentNumber reaches 100, or -10. This is where I'm stuck. I have tried:

Stopping the counter with a return false

  adicionar.addEventListener("click", function () {
  currentNumber++;
  currentNumberWrapper.innerHTML = currentNumber;
  if(currentNumber = 100){
    return false;
  }

I have also tried to just set currentNumber to 100 thinking that would stop incrementing, but instead the variable is starting at 100:

    adicionar.addEventListener("click", function () {
  currentNumber++;
  currentNumberWrapper.innerHTML = currentNumber;
  if(currentNumber = 100){
    currentNumber = 100;
  }
});

This is literally my first JS project and I'm also new to programming, so I feel the answer must be something really obvious. But I've spent the last three hours in Mozilla reference and W3Schools and it only made me more confused. What am I missing? Should I create a separate function? If so, how do I call it after the event has ended? I wanted to change the content of

when the condition has been met and turn the text into a reset, but I haven't even been able to do what the assignment asks yet. Oh well :(

EDIT: thank you so much for your answers! Following Robo Robok's suggestion, I just changed the counter's behavior once currentNumber == 100. I had to add a few more functions because I wasn't able to find out how to change pseudoelements with JS, so instead of just changing p:hover once reset conditions were met, I had to create two other events. I feel that this is way too much code for such a simple task, but it works, so I'll take it for now!

var currentNumberWrapper = document.getElementById("currentNumber");
var currentNumber = 0;
const adicionar = document.getElementById("adicionar");
const subtrair = document.getElementById("subtrair");
var mensagem = document.getElementById("mensagem");

function linkStyle() {
  mensagem.style.cursor = "pointer";
  mensagem.style.textDecoration = "underline";
  mensagem.setAttribute("onMouseLeave", "styleOff()");
}

function styleOff() {
  mensagem.style.cursor = "none";
  mensagem.style.textDecoration = "none";
}

function reset() {
  currentNumber = 0;
  currentNumberWrapper.innerHTML = currentNumber;
  mensagem.innerHTML =
    "<em>Clique nos botões para aumentar ou diminuir o número mostrado.</em>";
  mensagem.style.cursor = "none";
  mensagem.style.textDecoration = "none";
}

adicionar.addEventListener("click", function () {
  if (currentNumber >= 100) {
    mensagem.innerHTML = "<em>Ufa! Cansei... não quer começar de novo?</em>";
    mensagem.setAttribute("onClick", "reset()");
    mensagem.setAttribute("onMouseEnter", "linkStyle()");
  } else {
    currentNumber++;
    currentNumberWrapper.innerHTML = currentNumber;
  }
});

subtrair.addEventListener("click", function () {
  if (currentNumber == -10) {
    mensagem.innerHTML =
      "<em>Pra quê você precisa contar até -10?</em>";
    mensagem.setAttribute("onClick", "reset()");
    mensagem.setAttribute("onMouseEnter", "linkStyle()");
  } else {
    currentNumber--;
    currentNumberWrapper.innerHTML = currentNumber;
  }
});

Answer 1

One of the problems with your code is using an assignment operator instead of equality operator:

if (currentNumber = 100)

This is always true, because assignment operator returns the value being assigned.

Another problem is that even if it worked, returning false won't remove the click listener. In fact, in order to remove an event listener you can use element.removeEventListener('click', handler) method, but this can be a tricky approach, especially that you'd need to add it back at the point when the value is good to change again (like going from 100 to 99). Instead, consider just "muting" the behavior:

adicionar.addEventListener("click", function () {
  if (currentNumber >= 100) return;
  
  currentNumber++;
  currentNumberWrapper.innerHTML = currentNumber;
}

This way, you still run your click listener, but it returns (doing nothing) if currentNumber is beyond the limit.

Answer 2

You could do

adicionar.addEventListener("click", function() {
    if (currentNum >= 100 || currentNum <= -10) {
        return;
    } else {
        //MyScript
    }
}

Note: I'm also new to programming! I know how it is... Good luck!