CODEWITHSUNDEEP
javascriptif-statementdisplay
Jkil
Jkil

Reputation: 19

How to detect all divs display style in javascript if statement?

Lets say i have 5 divs,

Div1 to div5.

They all have different display style,

sometimes 2 are none,

sometimes 2 are block.

sometimes all are none,

Sometimes all are block.

Due to the functions i set.

And i want to make a if statement that happens when all divs are style. Display= block.

Something like

If (all divs are style. Display. = block ) { something }

But i dont know how to use && for 5 divs in JavaScript if statement.

Please guide me further. Thanks!

Upvotes: 0

Views: 119

Answers (2)

Shubham
Shubham

Reputation: 22319

You can use .find function for this.

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

So, you want to find the first element that isn't block. If none, exist undefined would be returned which means all are block.

const allAreBlock = Array.from(document.querySelectorAll("div")).find(
  (div) => getComputedStyle(div).display !== "block"
)

document.querySelector("#status").innerHTML = !allAreBlock
<div></div>
<div></div>
<div></div>
<div></div>
<div style="display: none"></div>

Are all elements block?: <span id="status"></span>

Upvotes: 0

user14520680
user14520680

Reputation:

You can use Array.prototype.every after converting querySelectorAll into an array:

const divs = document.querySelectorAll('div');
if (Array.from(divs).every((el)=> el.style.display == "block") {
  // ...
}

Upvotes: 1

Related Questions