Хром говорит , что не может прочитать добавление свойства неопределенного, как я могу добавить список классов.добавить в параметр без определения и определить его, когда я его вызываю

#javascript

Вопрос:

 <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');

}
 

Сообщение об ошибке

Хром говорит , что не может прочитать свойство добавить неопределенное , как я могу добавить список классов.добавить в параметр без определения и определить его при вызове , речь идет о параметре selectedBlock, поэтому мне нужно знать, не пошло ли что-то не так в моем коде, но, пожалуйста, знайте, что я вижу учебник, в котором есть тот же код, и он работал, я не знаю, как это сделать.

Ответ №1:

В строке, в которой вы столкнулись с проблемой, есть ошибка ввода —

selectedBlock.classlist.add('flipped');

Его classlist следует заменить на classList .

Кроме того, вместо добавления слушателей в каждый из блоков изображений, вы можете попробовать свои силы в делегировании событий. Вы найдете хороший ресурс для того же самого здесь. Это, безусловно, поможет повысить производительность вашего веб-приложения.

Ответ №2:

Это просто опечатка. Это должен быть список классов, а не список классов.