How to add an delay to if/else statement in javascript?

The many ways that I’m trying are not working this is one of them
html

<button type="button" onclick="myFunction()">MY BUTTON</button>
    <div id="love" class="love">
            <div class="boxContainer"></div>
            <div class="boxContainer"></div>
            <div class="boxContainer"></div>
    </div>

css

.love {
    display: none;
}
.boxContainer {
    display: inline-block;
    margin: 15px;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
}

js

function myFunction() {
    var boxContainer = document.getElementById("love");
    if (boxContainer.style.display === "none") {
        boxContainer.style.display = "block";
    }, 1000);
     else {
    boxContainer.style.display = "none";
    }
}

@codeca423 What exactly are you wanting to accomplish with the above code? If you want a delay, you can use setTimeout, but without knowing exactly what you are trying to accomplish, I can not help you further.

well just want to get the love div after 1 sec when I click the my button

With your current HTML and CSS, you could do something like:

function myFunction() {
  var boxContainer = document.getElementById("love");
  if (boxContainer.classList.contains("love")) {
    setTimeout(function() {
      boxContainer.classList.remove("love");
    }, 1000);
  }
}

thanks alot very helpful

Another approach using your current HTML and CSS is:

function myFunction() {
  var boxContainer = document.getElementById("love");
  var boxContainerStyles = window.getComputedStyle(boxContainer);
  if (boxContainerStyles.getPropertyValue("display") === "none") {
    setTimeout(function() {
      boxContainer.style.display = "block";
    }, 1000);
  }
}
1 Like

again thanks alot this is the best help newbies can get…