I made a click counter but it doesnt show a secret message when reached a certain number

Question

When the click counter reaches 69 it should display "Nice" in the h4 bellow but i can only make it to show the else "error" message (the else message should be in blank " " but for testing i put a message)

HTML

<button type="button" onclick="myFunction()"> Clic to count +1 </button>
<h4 id="demo"> 0 </h4>
<h4 id="secret"> </h4>

Javascript

const add = (function () {
  let counter = 60;
  return function () {counter += 1; return counter;}
} )();

function myFunction(){
  document.getElementById("demo").innerHTML = add();
  
  if (add == 69){
  document.getElementById("secret").innerHTML = "Nice";
}else{
  document.getElementById("secret").innerHTML = "error";
 }

}  

The initial value of counter is 60 to make it faster to test

Answer 1

Your approach is not bad at all. You'll need to store the value of the counter outside of the function, otherwise it will be reset to 60 each time the button is clicked. Furthermore i'd simplify the function hell. You variable add contains a function which returns a function. This also works, but is a pain to read. Always try to focus on less complexity but more readability.

let counter = 60;
document.getElementById("demo").innerHTML = counter

function add() {
  counter += 1;
  return counter;
}

function myFunction(){
  let counterAfterAdding = add();
  document.getElementById("demo").innerHTML = counterAfterAdding

  if (counterAfterAdding === 69){
    document.getElementById("secret").innerHTML = "Nice";
  } else {
    document.getElementById("secret").innerHTML = "error";
  }

}  

<button type="button" onclick="myFunction()"> Click to count +1 </button>
<h4 id="demo"> 0 </h4>
<h4 id="secret"> </h4>

Answer 2

What is add?

add is a function, so when you do console.log(add) it will display something like ƒ () {counter += 1; return counter;}

since add is a function it can never be equal to 69.

When you call add it updates the counter value and returns the same. You can store the value returned by the function add

const newCounter = add(); // whatever is returned by the add is stored in this variable

You can now do the comparison with the value stored in a newCounter variable like newCounter === 69

Here is the updated snippet:

 const add = (function () {
  let counter = 60;
  return function () {counter += 1; return counter;}
} )();

function myFunction(){
  const count = add();
  document.getElementById("demo").innerHTML = count;
  
  if (count == 69){
   document.getElementById("secret").innerHTML = "Nice";
  } else{
   document.getElementById("secret").innerHTML = "error";
  }

}  

<button type="button" onclick="myFunction()"> Click to count +1 </button>
<h4 id="demo"> 0 </h4>
<h4 id="secret"> </h4>

Answer 3

This should work:

const add = (function() {
  let counter = 60;
  return function() {
    counter += 1;
    return counter;
  }
})();

function myFunction() {
  document.getElementById("demo").innerHTML = add();
  if (document.getElementById("demo").innerHTML == 69) {
    document.getElementById("secret").innerHTML = "Nice";
  } else {
    document.getElementById("secret").innerHTML = "error";
  }

}

<button type="button" onclick="myFunction()"> Clic to count +1 </button>
<h4 id="demo"> 0 </h4>
<h4 id="secret"> </h4>

add is a function, when you call it, it make counter += 1 again. So instead, also avoid making a global variable as Amir Saleem suggested, you can directly compare what's in the element's content, or make a variable count like Amir Saleem's post.