CODEWITHSUNDEEP
javascripthtmlcsscontains
Damian
Damian

Reputation: 31

Search if div contains class (vanilla js)

I started with vanilla JS, so don't be mad ;) Try to code tic tac toe game.

I have this HTML:

<div class="container">
    <div class="row">
        <div class="cel empty" id="a1">
            <p>x</p>
        </div>
        <div class="cel empty" id="a2">
            x
        </div>
        <div class="cel empty" id="a3">
            x
        </div>
    </div>
    <div class="row">
        <div class="cel empty" id="b1"> x</div>
        <div class="cel empty" id="b2"> x</div>
        <div class="cel empty" id="b3"> x</div>
    </div>
    <div class="row">
        <div class="cel empty" id="c1"> x</div>
        <div class="cel empty" id="c2"> x</div>
        <div class="cel empty" id="c3">x </div>
    </div>
</div>

Also this JS:

var fieldEmptyElements = document.querySelectorAll('div.cel');//pobieram divy które zawierają klasę empty

    window.addEventListener('load', checkHowManyEmpty);//po załadowaniu strony wczytuje funkcję o nazwie checkHowManyEmpty


    //funkcja ma za zadanie sprawdzić jak dużo pól div ma klasę empty
    function checkHowManyEmpty(){
        for(var i=0, max=fieldEmptyElements.length; i<max; i++){
            if(fieldEmptyElements.classList.contains('empty')){
                alert('there is one element with empty class');
            }
            else{
                alert('no element with empty class');
            }
        }
    }

Function need to check if any element have class EMPTY - but console gave me this: "Uncaught TypeError: Cannot read property 'contains' of undefined at checkHowManyEmpty". Any idea why?

Upvotes: 1

Views: 1660

Answers (4)

C3roe
C3roe

Reputation: 96306

Why perform that check yourself in a loop, and not let the selector engine do the work? That's what it's optimized for after all ...

document.querySelectorAll('div.cel.empty').length will tell you whether there are elements with the class empty among those div.cell elements in one simple method call.

Your function example from the comments - unnecessary else-if replaced with a simple else:

function checkHowManyEmpty() {
    var fieldEmptyElements = document.querySelectorAll('div.cel.empty');
    if (fieldEmptyElements.length >= 1) {
        console.log('at least one element');
    } else {
        console.log('no empty elements');
    }
}

Upvotes: 3

Ryan Wilson
Ryan Wilson

Reputation: 10765

document.querySelectorAll() returns a node list. You are then looking at the classList property of the node list. This is wrong as you need to check each element in the node list and then check its classList.

In your for loop you would use your var i to index your node list.

fieldEmptyElements[i].classList

Upvotes: 0

Timo Jokinen
Timo Jokinen

Reputation: 726

fieldEmptyElements is an array. To access an item in an array you need the index which in your case is the i variable. For every iteration of the loop i increases by 1.

if (fieldEmptyElements[i].classList.contains('empty'))

This way you access the item of the array with the current index.

Upvotes: 1

JJWesterkamp
JJWesterkamp

Reputation: 7916

I think you actually meant to do this: (You should access the current index of the collection)

// ...
if (fieldEmptyElements[i].classList.contains('empty')) {
// ...

Upvotes: 1

Related Questions