CODEWITHSUNDEEP
javascript
besho samy
besho samy

Reputation: 11

The chrome says can not read property add of undefined , how can I add classlist.add to parameter without been defined and define it when I call it

<body>
<section class="info-container">
    <div class="name-container">
        <span>The Name :</span>enter code here
        <div class="name"></div>
    </div>
    <div class="wrong-container">
        <span>Wrong Tries :</span>
        <div class="wrong-tries">100</div>
    </div>
</section>
<section class="img-container">
    <div class="img-block" data-naem="1">
        <div class="face front">?</div>
        <div class="face back">
            <img src="images/1.png" alt="" class="img">
        </div>
    </div>
    <div class="img-block" data-naem="1">
        <div class="face front">?</div>
        <div class="face back">
            <img src="images/1.png" alt="" class="img">
        </div>
    </div>
    <div class="img-block" data-naem="2">
        <div class="face front">?</div>
        <div class="face back">
            <img src="images/2.png" alt="" class="img">
        </div>
    </div>
    </div>
    <script src="main.js"></script>
</section>
</body>

let name = document.querySelector('.name'),

    wrongTries = document.querySelector('.wrong-tries'),

    imgContainer = document.querySelector('.img-container'),

    imgBlocks = Array.from(imgContainer.children);


imgBlocks.forEach((block, index) => {
    block.addEventListener('click', function () {

        flipBlock(block)

    })
})

function flipBlock(selectedBlock) {

    selectedBlock.classlist.add('flipped');

}

Error message

The chrome says can not read property add of undefined , how can I add classlist.add to parameter without been defined and define it when I call , it's about selectedBlock parameter so I need to know if anything went wrong in my code , but please know that I see tutorial that has the same code and It worked I don't know how

Upvotes: 0

Views: 66

Answers (2)

jateen
jateen

Reputation: 804

The line you are facing the issue on has a typing error -

selectedBlock.classlist.add('flipped');

The classlist should be replaced with classList.

Also instead of adding listeners to each of the image-blocks, you can try your hands on Event Delegation. You'll find a good resource for the same here. This would certainly help in increasing the performance of your web application.

Upvotes: 1

jasamguli
jasamguli

Reputation: 11

It's just a typo error. It should be classList, not classlist.

Upvotes: 0

Related Questions