Why is my function and loop not able to access my global variable?

Question

The NodeList I have been using as a variable in functions has been working, but it it not working in the latest one on which I am working.

It gives an error "card is not defined." When I pass the variable into the function, it says it isn't iterable.

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();
            }
        }
    }
}

This is the global variable I'm trying to use:

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

This is a link to the whole project: https://codepen.io/ThomasBergman1987/pen/LqrJQM

`cards` can not be both a global variable and a function parameter at the same time. — Mark, Feb 12 '19 at 20:36

Abion47 · Accepted Answer · 2019-02-12T22:13:13.953

4

You are hiding the value of your global constant by defining a parameter in the function with the same name:

const cards = ...;

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

Furthermore, when you call flipBack in your other function, you call it without passing any parameters, which causes the value of the parameter cards to be undefined.

You can fix the issue by simply removing cards from your function's parameter list:

function flipBack () {
    // ...
}

As for why the code is saying cards is not iterable, cards is going to be an HTMLCollection. While most modern browsers will support iterating on that kind of object with for/in, this functionality is not guaranteed, and you shouldn't be doing that anyway. The safer approach is to use a normal for loop:

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

edited Feb 12 '19 at 22:13

answered Feb 12 '19 at 20:37

Abion47

22,211
4
65
88

@Thomas Run `console.log(cards);` inside the function and see what it actually is. – Abion47 Feb 12 '19 at 22:13
It says it is undefined. – Thomas Feb 12 '19 at 22:25
@Thomas Do you still have `cards` as a parameter? – Abion47 Feb 12 '19 at 22:28
I still have `cards` as a parameter. Yes. – Thomas Feb 12 '19 at 22:29
I took the time to read the resources you provided and wrote down the solutions to make sure I had the details right. I appreciated their greater detail on this issue too. But I still must be missing something. – Thomas Feb 12 '19 at 22:34
@Thomas The solution is the lone sentence right smack in the middle of my answer: **You can fix the issue by simply removing `cards` from your function's parameter list** – Abion47 Feb 12 '19 at 22:37
I think I have a complete understanding of the problem now. I had removed it at one point, but that didn’t solve it immediately. So I put it back and then tried the regular `for` loop solution, but I hadn’t tried the new `for` loop without the parameter. Thanks for your time and effort, and the solution! I think I can apply the solution in other areas as well! – Thomas Feb 12 '19 at 22:46
@Thomas see https://stackoverflow.com/help/someone-answers for an explanation of what to do when someone answers. In particular, see the part about marking an answer as accepted if it you find it provides a solution to your question – sideshowbarker Feb 12 '19 at 23:28

score 0 · Answer 2 · answered Feb 12 '19 at 20:47

You're sending cards as an argument to flipBack() function, it's either you remove it or send cards again when you call the function 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();
            }
        }
    }
}

Why is my function and loop not able to access my global variable?

2 Answers2