Javascript Global Variables Not Working

Question

I'm having a problem with global variables in JavaScript. What I tried doing was declare the variable outside of the function, then changing it within a function, then calling in another function. From what I've read, this should have worked, but it's just giving me undefined. Here is my code to s card drawing game I'm making.

var randSuit;
function getRandCard() {
    var randNum;
    var randSuit;
    var randVal;
    randNum = Math.floor(Math.random()*13)+1;
    if (randNum == 1) {
        randVal = "2";
    } else if (randNum == 2) {
        randVal = "3";
    } else if (randNum == 3) {
        randVal = "4";
    } else if (randNum == 4) {
        randVal = "5";
    } else if (randNum == 5) {
        randVal = "6"; 
    } else if (randNum == 6) {
        randVal = "7";
    } else if (randNum == 7) {
        randVal = "8";
    } else if (randNum == 8) {
        randVal = "9"; 
    } else if (randNum == 9) {
        randVal = "10";
    } else if (randNum == 10) {
        randVal = "Jack";
    } else if (randNum == 11) {
        randVal = "Queen";
    } else if (randNum == 12) {
        randVal = "King";
    } else if (randNum == 13) {
        randVal = "Ace";
    }

    randNum = randNum = Math.floor(Math.random()*4)+1;

    if (randNum == 1) {
        randSuit = "Hearts";
    } else if (randNum == 2) {
        randSuit = "Clubs";
    } else if (randNum == 3) {
        randSuit = "Spades";
    } else if (randNum == 4) {
        randSuit = "Diamonds";
    }

    console.log(randSuit);
    var randCard = (randVal + " of " + randSuit);
    //Return the Value of the randomly chosen Card.
    return (randCard);
}

//This function calls the random card from the function above, then applies logic to see if it's the same, then outputs the result.
$(function() {
    $('#drawCard').click(function() {

        var e = document.getElementById("faceValue");
        var faceValue = e.options[e.selectedIndex].text;
        var e = document.getElementById("suit");
        var suit = e.options[e.selectedIndex].text;

        $('#oneCardContainer').slideDown('slow');
        var pickedCard = (faceValue + " of " + suit);

        var randCard = getRandCard();
        console.log (randSuit);

        if (pickedCard == randCard) {
            $("#oneCardResults").val("You Chose a " + pickedCard + " and got a " + randCard + ". \nYou Win!");
        } else if (pickedCard != randCard) {

            $("#oneCardResults").val("You Chose a " + pickedCard + " and got a " + randCard + ". \nYou Lose!");

        }
    });
});

That is the code I tried and the variable I'm trying to pass is randSuit. what am I doing wrong?

Answer 1

You are defining a global variable called randSuit, but also a local variable with the same name. When you do randSuit = randSuit;, effectively nothing happens, since both the left side and right side are referencing the local variable. You need to name them differently.