Question

我一直在函数中用作变量的NodeList一直在工作，但在最新版本的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

通过在函数中定义一个具有相同名称的参数，可以隐藏全局常量的值：

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对此类对象进行迭代，但不能保证此功能以及you shouldn't be doing that anyway。比较安全的方法是使用普通的for循环：

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

Answer 2

您要发送卡片作为003函数的参数，要么删除它，要么在调用函数flipBack()时再次发送卡片

flipBack(cards)

为什么我的函数和循环无法访问我的全局变量？

2 个答案: