Почему моя функция и цикл не могут получить доступ к моей глобальной переменной?

Question

Работал NodeList, который я использовал в качестве переменной в функциях, но он не работает в последней версии, над которой я работаю.

Выдает ошибку «карта не определена».Когда я передаю переменную в функцию, она говорит, что она не повторяется.

function matchCards() {
    if(hand[0] === hand[1]) {
        addPoint();
    } else if(hand[0] != hand[1]) {
        flipBack();
    }
}
function flipBack (cards) {
    for(card of cards) {
        if(card.firstElementChild.src != "img/cardback.jpeg") {
            for(const id of ids) {
                document.querySelector(`[alt="${id}"]`).src = "img/cardback.jpeg";
                console.log(document.querySelector(`[alt="${id}"]`).src);
                hand = [];
                changePlayer();
            }
        }
    }
}

Это глобальная переменная, которую я пытаюсь использовать:

const cards = document.getElementsByClassName("card");

Этоссылка на весь проект: https://codepen.io/ThomasBergman1987/pen/LqrJQM

Answer 1

Вы отправляете карты в качестве аргумента функции flipBack(), это либо вы удаляете ее, либо отправляете карты снова при вызове функции flipBack(cards)

function matchCards() {
    if(hand[0] === hand[1]) {
        addPoint();
    } else if(hand[0] != hand[1]) {
        flipBack();
    }
}
function flipBack () {
    for(card of cards) {
        if(card.firstElementChild.src != "img/cardback.jpeg") {
            for(const id of ids) {
                document.querySelector(`[alt="${id}"]`).src = "img/cardback.jpeg";
                console.log(document.querySelector(`[alt="${id}"]`).src);
                hand = [];
                changePlayer();
            }
        }
    }
}

Answer 2

Вы скрываете значение своей глобальной константы, определяя параметр в функции с тем же именем:

const cards = ...;

function flipBack (cards) {
    // The following print statement will print the 
    // value of the parameter, not the global constant
    console.log(cards); 
}

Кроме того, когда вы вызываете flipBack в другой функции, вы вызываете ее безПередача любых параметров, в результате чего значение параметра cards будет неопределенным.

Вы можете устранить проблему, просто удалив cards из списка параметров вашей функции:

function flipBack () {
    // ...
}

Что касается того, почему код говорит, что cards не повторяется, cards будет HTMLCollection.В то время как большинство современных браузеров будут поддерживать итерации такого типа объектов с for/in, эта функциональность не гарантируется, и вам все равно не следует делать это .Более безопасный подход - использовать цикл for:

function flipBack () {
    for (var i = 0; i < cards.length; i++) {
        var card = cards[i];
        // ...
    }
}