Saving a global variable in javascript depending on which button was clicked

Question

I'm trying to switch my console.log()/prompt based javascript game into a visual playable game for browsers. So to do this, I'm mixing in jQuery with my javascript.

1) I'm trying to set nHands = 1, 2, or 3 based on which button that the user clicks on. I have 3 buttons with the same class of .smallbutton, and unique classes of .oneh .twoh and .threeh.

2) After the user clicks on any one of the 3 buttons, all the buttons will disappear, with the use of $('.smallbutton').detach();. This works fine.

The Problem is with 1) above. It does not seem to set nHands = to anything. Because in order for my recordBetAmount(); to run/do something, it needs to be set equal to 1,2,or 3. Why is nHands not being set equal to anything?

Here's the fiddle http://jsfiddle.net/cL9dx/ . Please note that the fiddle includes the second way I tried.

Here's the relevant part of my code:

var hand1, hand2, hand3, hD, nHands; //global vars

function numHands() {
    $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');
    $('.oneh').click(function () {
        nHands = 1;
        $('.smallbutton').detach();
    });
    $('.twoh').click(function () {
        nHands = 2;
        $('.smallbutton').detach();
    });
    $('.threeh').click(function () {
        nHands = 3;
        $('.smallbutton').detach();
    });
    if (nHands > 0 && nHands < 4) {
        x = 150000 / nHands;
        if (nHands > 0) {
            hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) {
                hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) {
                    hand3 = new Hand("Third Hand", x, x, ".hand3");
                }
            }
        }
    } else {
        $('<p>ERROR!!!</p>').appendTo('.message');
    }
}

....
numHands();
recordBetAmount();

edit: I've even tried making the above numHands function into two separate functions, but still doesn't seem to set nHands = to anything.

Answer 1

Update

Have update your jsfiddle and remove the code not required for this problem and added comments to explain the changes

http://jsfiddle.net/raunakkathuria/cL9dx/4/

---

The problem as per your code is that you are calling numHands() and recordBetAmount() both on document load but nHands is set when user click on any of the button so you can do like this

var hand1, hand2, hand3, hD, nHands; //global vars

function recordBetAmount() {
  alert("Finally nHands is " + nHands);
}

$(document).ready(function () {
       $('.oneh').click(function() {
            nHands = 1;
            alert("First " + nHands);
            $('.smallbutton').detach(); 
            numHands();
        });
        $('.twoh').click(function() {
            nHands = 2;
            alert("Second " + nHands);
            $('.smallbutton').detach(); 
            numHands();
        });
        $('.threeh').click(function() {
            nHands = 3;
            alert("Third " + nHands);
            $('.smallbutton').detach(); 
            numHands();
        });
});

function numHands() {
    $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');

    recordBetAmount();
    if (nHands > 0 && nHands < 4) {
        x = 150000/nHands;
        if (nHands > 0) { hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) { hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) { hand3 = new Hand("Third Hand", x, x, ".hand3");
        } } } }
    else { 
        $('<p>ERROR!!!</p>').appendTo('.message'); 
    }


}

Check http://jsfiddle.net/raunakkathuria/NWQ8j/1/

Answer 2

Try to separate your numHands function logic into two function. First will attach event handlers to you buttons and other will make calculation as following code here. And enclose your code inside of $(document).ready();. And according you jsFiddle example you are passing nHands parameter to the function so remove global nHands diclaration. Here is jsFiddle which works. Another thing is here if you get read of global variable nHands, your other functions like recordBetAmount and etc. should be changed accordingly. Because they does not recognize that nHands variable declared. And it gives Uncaught ReferenceError: nHands is not defined in console output. recordBetAmount function should be modified. You are calling it when document ready. However, it seems to me that this function should be called after persons make bet.

$(document).ready(function()
{    
suits = ["s", "d", "c", "h"];
deck = [];
var hand1, hand2, hand3, hD; //global vars

   ...

function numHands() {
    var nHands;
    $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');
        $('.oneh').click(function() {
            nHands = 1;
            $('.smallbutton').detach();
            numhands2(nHands); });
        $('.twoh').click(function() {
            nHands = 2;
            $('.smallbutton').detach();
            numhands2(nHands); });
        $('.threeh').click(function() {
            nHands = 3;
            $('.smallbutton').detach();
            numhands2(nHands); });

function numhands2(nHands) {
    console.log(nHands);
    if (nHands > 0 && nHands < 4) {
        x = 150000/nHands;
        if (nHands > 0) { hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) { hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) { hand3 = new Hand("Third Hand", x, x, ".hand3"); } }
        hD = new Hand("Dealer", 4500200 , 4500200 , ".handD"); } }
    else { $('<p>ERRRORRRRR</p>').appendTo('.message'); } }
}

....

});

Or marge numHands2 and recordBetAmount functions.

function numhands2(nHands) {
    console.log(nHands);
    if (nHands > 0 && nHands < 4) {
        x = 150000/nHands;
        if (nHands > 0) { hand1 = new Hand("First Hand", x, x, ".hand1");
            if (nHands > 1) { hand2 = new Hand("Second Hand", x, x, ".hand2");
                if (nHands > 2) { hand3 = new Hand("Third Hand", x, x, ".hand3"); } }
        hD = new Hand("Dealer", 4500200 , 4500200 , ".handD"); } }
    else { $('<p>ERRRORRRRR</p>').appendTo('.message'); } }
}

function recordBetAmount() {
    if (nHands > 0) { setBetAmount(hand1);
        if (nHands > 1) { setBetAmount(hand2);
            if (nHands > 2) { setBetAmount(hand3); } } } }

Answer 3

I tried to do what you want, just some changed:

$(document).ready(function () {
    var Hand = function Hand() {
        //your Hand class
    };

    var NumHands = function NumHands(callback) {
        var $this = this;
        this.callback = callback;
        this.hand1 = null;
        this.hand2 = null;
        this.hand3 = null;
        this.hD = null;
        this.nHands = null;

        $('<p>Choose the number of hands you want to play.</p>').appendTo('.message');
        $('.oneh').click(function () {
            $this.detachAndCreate(1);
        });
        $('.twoh').click(function () {
            $this.detachAndCreate(2);
        });
        $('.threeh').click(function () {
            $this.detachAndCreate(3);
        });
        this.detachAndCreate = function (val) {
            this.nHands = val;
            $('.smallbutton').detach();
            this.createHands();
            if (jQuery.isFunction(this.callback)) this.callback.call(this);
        };
        this.createHands = function () {
            if (this.nHands > 0 && this.nHands < 4) {
                var x = 150000 / this.nHands;
                if (this.nHands > 0) {
                    this.hand1 = new Hand("First Hand", x, x, ".hand1");
                    if (this.nHands > 1) {
                        this.hand2 = new Hand("Second Hand", x, x, ".hand2");
                        if (this.nHands > 2) {
                            this.hand3 = new Hand("Third Hand", x, x, ".hand3");
                        }
                    }
                }
            } else {
                $('<p>ERROR!!!</p>').appendTo('.message');
            }
        };
    };

    function recordBetAmount () {
        //here 'this' refers to numHands instance
    };

    var numHands = new NumHands(recordBetAmount);
});