JavaScript display = “none” does not stop the function

You need to update your if statement to do a comparison check. Right now you are just setting the style to equal block.

if (word.style.display == "block") 

You also need to perform a check for the count value before incrementing it.

 if (num > 5) {
    word.style.display = "none";
  } else {
    num = num + 1;
    numb.innerHTML = num;
  }

var square = document.getElementById("square");
var numb = document.getElementById("number");
var num = 0;
var begin = document.getElementById("begin");
var word = document.getElementById("word");

begin.addEventListener("click", function() {
  word.style.display = "block";
  if (word.style.display == "block") {
    square.addEventListener("click", function() {
     if (num > 5) {
        word.style.display = "none";
      } else {
        num = num + 1;
        numb.innerHTML = num;
      }
    })
  }
})
#square {
  position: absolute;
  background-color: red;
  height: 150px;
  width: 150px;
}

#number {
  position: absolute;
  top: 200px;
  font-size: 25px;
}

#begin {
  position: absolute;
  top: 300px;
  font-size: 25px;
}

#word {
  position: absolute;
  top: 400px;
  font-size: 25px;
  display: none;
}
<div id="square"></div>
<div id="number">0</div>
<div id="begin">begin</div>
<div id="word">word</div>

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top