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.

When you calling numHands() function? After DOM get ready? or not? if before DOM get ready it seams that your event handlers does not attached to any buttons. — Khamidulla
– Khamidulla, Commented Dec 26, 2013 at 2:19
And another thing here is your if statement will work even your buttons did not clicked. Before if statement can output to console your nHands variable? Is it undefined or not? — Khamidulla
– Khamidulla, Commented Dec 26, 2013 at 2:21
i think you should separate the preparation of dom click handlers from the actual execution ie: (remove the click handlers on the function and put them on document ready -- outside the function) <script>$(document).ready(function(){ $('.oneh').click(function () { nHands = 1; $('.smallbutton').detach(); }); $('.twoh').click(function () { nHands = 2; $('.smallbutton').detach(); }); $('.threeh').click(function () { nHands = 3; $('.smallbutton').detach(); }); })</script> — ianace
– ianace, Commented Dec 26, 2013 at 2:22

Khamidulla · Accepted Answer · 2013-12-26 03:01:11Z

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

Just look around other codes and try to write more clear code. And learn about scope of variables in JavaScript. I suggest you this book and reference books which is given there.

Mehran Hatami · Accepted Answer · 2013-12-26 02:48:20Z

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

Raunak Kathuria · Accepted Answer · 2013-12-26 03:04:32Z

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/

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related