如何设置超时以在Javascript中使用if函数显示多个div

Question

So I have a simple javascript that looks like this

function  myfunction(){

var a = [document.getElementById("div1"),
document.getElementById("div2"), document.getElementById("div3")];

if(a.style.display=="none"){

setTimeout(function(){a.style.display="block";},4000);
}

}

And html code looks like this

<  a href="#" onclick="myfunction();"  >   click to show div1 and div2 after 4 seconds<   /a  >

<  p id="div1"   style="display:none;" >divv1<  /p  >


<  p id="div2"    style="display:none;"    >divv2<  /p  >



<  p id="div3"    style="display:none;"    >divv3<  /p  >

However divs are not showing after 4 seconds after I clicked.

Is there something wrong with my code?

Can someone please guide me further?

Thanks alot!

Answer 1

var a is the array, so you need to set the style for all the elements of the array.

 function myfunction() { var a = [document.getElementById("div1"), document.getElementById("div2"), document.getElementById("div3") ]; if (a[0].style.display == "none" && a[1].style.display == "none" && a[2].style.display == "none") { setTimeout(function() { a.forEach(item => item.style.display = "block"); }, 4000); } }

 <a href="#" onclick="myfunction();"> click to show div1 and div2 after 4 seconds </a> <p id="div1" style="display:none;">divv1 </p> <p id="div2" style="display:none;">divv2 </p> <p id="div3" style="display:none;">divv3 </p>

Answer 2

a is an array. It does not have a style property. You have to iterate over the array and change the display property for each.

function  myfunction() {

  var a = document.querySelectorAll("p") ;

  a.forEach( div => {
    if(div.style.display == "none"){
      setTimeout(function() {
        div.style.display = "block";
      }, 4000);
    }
  });
}