any way to make the button appear when ALL elements have a specific class? [JS]-CodePudding

I have a list of cards, when you click on a card, it opens and a class "opened" is added to it. How to make it so that when all the cards are opened a button will appear (does not matter the button or some other action);

HTML when the program starts:

<ul id='container'>
    <li class='card'></li>
    <li class='card'></li>
    <li class='card'></li>
    <li class='card'></li>
    <li class='card'></li>
</ul>

When all cards opened:

<ul id='container'>
    <li class='card opened'></li>
    <li class='card opened'></li>
    <li class='card opened'></li>
    <li class='card opened'></li>
    <li class='card opened'></li>
</ul>
<button class='btn-restart'>Restart</button>

EDITED:

for some reason, even when i make the button appear when at least 1 card has a class 'opened', nothing happens

JS:

function couplesApp() {
    const container = document.getElementById('container');
    const buttonRestart = createRestartButton();

    // some other essential stuff i didn't include

    const cards = document.getElementsByClassName('card');
    for (let i = 0; i < cards.length; i  ) {
        if (cards[i].classList.contains('opened')) {
            container.append(buttonRestart);
        };
    };

EDITED (2):

SOLUTION IS:

document.querySelector('#container').addEventListener('click', () => {
        const cards = document.getElementsByClassName('card');
        for (let i = 0; i < cards.length; i  ) {
            if (cards.length === document.querySelectorAll('.card.opened').length){
                container.append(buttonRestart);
            };  
        };
    });

Thanks to Scott Marcus.

CodePudding user response：

See comments inline below:

// Get reference to all the li.card elements and the hidden button
let cards = document.querySelectorAll("#container > li.card");
const button = document.querySelector(".btn-restart");

// Set up an event handler on the card container
document.querySelector("#container").addEventListener("click", function(event){
  // Check to see if the click event originated at a LI element
  if(event.target.nodeName === "LI"){
    // Add the opened class to the clicked LI
    event.target.classList.add("opened");
    
    // If the amount of cards matches the amount of opened cards...
    if(cards.length === document.querySelectorAll(".card.opened").length){
      button.classList.remove("hidden");  // Unhide the button
    }
  }
});

.hidden { display:none; }

<ul id='container'>
    <li class='card'>1</li>
    <li class='card'>2</li>
    <li class='card'>3</li>
    <li class='card'>4</li>
    <li class='card'>5</li>
</ul>
<button class='btn-restart hidden'>Restart</button>

CodePudding user response：

If you always know the amount of cards beforehand, you can check if the number of elements with the class opened matches the number of cards:

if (document.getElementsByClassName("opened").length === 5) { }

If you do not know the number of cards then use the same document.getElementsByClassName to get all elements with the class card and iteratively check if all of them have the class opened.

let allOpened = true;
const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i  ) {
    if (!cards[i].classList.contains("opened")) {
        allOpened = false;
    }
}

CodePudding user response：

Using js you can check all the items with class card inside container if they have class opened or not:

[...document.querySelectorAll('.container .card')]
    .every(item => item.classList.contains('opened'))