Fixing some variable issues in JS and JQ

Question 1

Good news and bad news:

The good news

Your code actually works.

If you replace

console.log(deal());

with

console.log(JSON.stringify(deal()));

then you'll get the result you expect.

The bad news

The Chrome console is "live" -- meaning it shows the current value of an object -- not the value at the time you logged it.

(If you ask me, I'd call this a bug -- but my vote doesn't count.)

You have two solutions.

Solution 1

Use console.log and stringify as I have done.

Solution 2

Make deal return a new and different object by moving re-arranging your code slightly.

function deal() {
  // MOVE THESE LINES INSIDE THE FUNCTION.
  // empty array to store cards
  var cards = [];

  // var to start for loop 
  var i = 0;              
  // start for loop 
  for (i; i < 2; i++) {
    // add a random card to the i^th index of cards
    cards[i] = randomCard();
  }
  // value fo function is array of two cards
  return cards;
}

Question 2

maybe this could help you

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

Defining getters and setters

A getter is a method that gets the value of a specific property. A setter is a method that sets the value of a specific property. You can define getters and setters on any predefined core object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.

Applied to your code:

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Blackjack Game</title>
</head>
<body>

    <button type="submit" id="deal">Deal</button>
    <p class="user">
        Your cards: 
    </p>
    <p class="dealer">
        The dealers cards: 
    </p>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

    $(document).ready(function() {

        // gives the user and dealer a DOM element
        var $user_cards = $('.user');
        var $dealer_cards = $('.dealer');

        // hides the DOM elements until the game has started
        $($user_cards).hide();
        $($dealer_cards).hide();

        // jQuery var for DOM element to start the game
        var $deal = $('#deal');

        // var to track if the deal button  has been clicked
        var click = 0;

        function randomCard() {
            // random number between 0 and 10
            var j = Math.random() * 10;
            // round that number into a var called card
            var card = Math.round(j);   
            // if card is 0, assign a J Q or K by making a random number again
            if (card === 0) {
                //another random number
                var k = Math.random() * 10; 
                // checks random number and assign J Q or K                     
                if (k <= 4) {
                    card = 'J';
                } else if (k <= 7) {
                    card = 'Q';
                }
                else {
                    card = 'K';
                }
            }
            // value of the function is a single card
            return card;
        }

        // empty array to store cards
        var cards = [];

        function deal() {
            // var to start for loop 
            var i = 0;              
            // start for loop 
            for (i; i < 2; i++) {
                // add a random card to the i^th index of cards
                cards[i] = randomCard();
            }
            // value fo function is array of two cards
            return cards;
        }

        $($deal).click(function() {

            // make the game start check = 1
            click++;
            // check to see if the game started
            if (click === 1) {
                // make the button disappear when game has started
                $($deal).fadeToggle('fast');

                // makes the player DOM elements appear when game is started
                $($user_cards).fadeToggle(2000);
                $($dealer_cards).fadeToggle(2000);
            }

            // make an object for the user and store hand under user.hand
            var user = {
                //hand: function() { return deal() }
                get hand() { return deal(); },
            };

            // make an object for the dealer and store hand under dealer.hand
            var dealer = {
                //hand: function() { return deal() }
                get hand() { return deal(); },
            };

            console.log(user.hand + " " + dealer.hand);
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());


        }); // $deal.click() end

    }); // document.ready() end

    </script>
</body>