javascript - 在节点集合上使用 classList

Question

这是我使用 .classList.contains() 时遇到的错误

Uncaught TypeError: Cannot read property 'contains' of undefined

请解释为什么它不起作用:我需要它作为我的学徒训练

<div class="game-grid">
        <button class="covered" <?php print $array[0]?>></button>
        <button class="covered" <?php print $array[1]?>></button>
        <button class="covered" <?php print $array[2]?>></button>
        <button class="covered" <?php print $array[3]?>></button>
        <button class="covered" <?php print $array[4]?>></button>
        <button class="covered" <?php print $array[5]?>></button>
        <button class="covered" <?php print $array[6]?>></button>
        <button class="covered" <?php print $array[7]?>></button>
        <button class="covered" <?php print $array[8]?>></button>
        <button class="covered" <?php print $array[9]?>></button>
    </div>
    <script>



        let buttons = document.getElementsByClassName("covered");

        if(buttons.classList.contains("choosen") == false){

            for (button of buttons) {
                button.addEventListener("click", function(event){
                    event.target.classList.add("choosen");
                    event.target.classList.remove("covered");
                });
            }

        }     

    </script>

Answer 1

getElementsByClassName 返回一个节点集合，因此您需要遍历该集合并检查第 n-th 个元素 .classList