Changing a global variable value based on which radio button is selected

Question

Here i a part of JS code to play 2 player TIC-TAC-TOE

<script type="text/javascript">

        //Global Variables
        var painted;
        var content;
        var winningCombinations;
        var turn = 0;
        var theCanvas;
        var c;
        var cxt;
        var squaresFilled = 0;
        var w;
        var y;




        //Instanciate Arrays
        window.onload=function(){

            painted = new Array();
            content = new Array();
            winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

            for(var l = 0; l <= 8; l++){
            painted[l] = false;
            content[l]='';
            }

        }


        //Game methods
        function canvasClicked(canvasNumber){
            theCanvas = "canvas"+canvasNumber;
            c = document.getElementById(theCanvas);
            cxt = c.getContext("2d");


            if(painted[canvasNumber-1] ==false){
                if(turn%2==0){
                    /* Draw X */
                    cxt.beginPath();
                    cxt.moveTo(10,10);
                    cxt.lineTo(40,40);
                    cxt.moveTo(40,10);
                    cxt.lineTo(10,40);
                    cxt.stroke();
                    cxt.closePath();
                    content[canvasNumber-1] = 'X';
                }

                else{
                    /* Draw circle */
                    cxt.beginPath();
                    cxt.arc(25,25,20,0,Math.PI*2,true);
                    cxt.stroke();
                    cxt.closePath();
                    content[canvasNumber-1] = 'O';
                }


                turn = turn + 1;
                painted[canvasNumber-1] = true;
                squaresFilled++;
                checkForWinners(content[canvasNumber-1]);

                if(squaresFilled==9){   
                   alert("Game Over");
                    location.reload(true);
                }

            }

I want to select a value from a radio button, that is:

 <fieldset data-role="controlgroup" data-type="horizontal">
                    <input type="radio" name="players" id="playerx"/>
                    <label for="playerx"><b>TEAM - X</b></label>
                    <input type="radio" name="players" id="playery"/>
                    <label for="playery"><b>TEAM - O</b></label>                                      
                </fieldset>

Suppose if A player clicks on TEAM - X I want the global variable to be incremented by one else by 2.

I am not able to choose values or id's from the radio button properly to solve this. Can someone help?

You tagged this question with jQuery, but I don't see any jQuery in your code. Is jQuery really an option for you? — Surreal Dreams, May 01 '13 at 04:21
There's not enough here for us to help, I think. But to set a global variable, remember that all global variables are on the `window` object, _e.g._ `window.w`, `window.y`, `window.squaresFilled`. — Andrew Cheong, May 01 '13 at 04:23
data-role may be common in jQuery mobile, but it is not limited to only that. It is valid HTML5. — Ryan, May 01 '13 at 05:12
This may help http://stackoverflow.com/questions/596351/how-can-i-get-which-radio-is-selected-via-jquery — Ryan, May 01 '13 at 05:14

score 0 · Answer 1 · answered May 01 '13 at 06:24

0

Attach an event listener to the radio button listening for the change event, then increment some global variable in the handler.

var playerx = document.getElementById('playerx');
playerx.onchange = function(e){
    if(playerx.checked)
        globalVar+=1;
    else
        globalVar+=2;
}

answered May 01 '13 at 06:24

Ryan Lynch

7,676
1
24
33

Sorry but it did not work. Can you be more specific and tell me where to place this in the my code and also, if I choose radio button - X, my click on the TIC-TAC-TOE squares should be a X and not an O even when O turn comes(that is when global var turn % 2 !== 0) – Swaroop Nagendra May 01 '13 at 12:24

score 0 · Answer 2 · answered May 01 '13 at 13:33

Finally managed to answer to my own question. This is after a bit of research and learning. I was not correct when I was trying to increment global var "turn" to 1 or 2 depending on X or O radio button was selected. This paved way to bugs. Here is a simple and well silly approach but it works, with good Big-O.

Here is the complete javascript code, I will highlight the code which I changed.

        //Global Variables
    var painted;
    var content;
    var winningCombinations;
    var turn = 0;
    var theCanvas;
    var c;
    var cxt;
    var squaresFilled = 0;
    var w;
    var y;




    //Instanciate Arrays
    window.onload=function(){

        painted = new Array();
        content = new Array();
        winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

        for(var l = 0; l <= 8; l++){
        painted[l] = false;
        content[l]='';
        }
    }

    function displayResult(plr_team)
    {
playr_turn = browser; // making playr_turn global. Not good style but works.
                         // Also assigning the "value" that is playerx or playery  
                         // to the global var playr_turn.                                
    }

    //Game methods
    function canvasClicked(canvasNumber){
        theCanvas = "canvas"+canvasNumber;
        c = document.getElementById(theCanvas);
        cxt = c.getContext("2d");


        if(painted[canvasNumber-1] ==false){
            if(playr_turn == "playerx"){ // checking the value returned
                                                         // from the radio button
                /* Draw X */
                cxt.beginPath();
                cxt.moveTo(10,10);
                cxt.lineTo(40,40);
                cxt.moveTo(40,10);
                cxt.lineTo(10,40);
                cxt.stroke();
                cxt.closePath();
                content[canvasNumber-1] = 'X';
            }

            else{
                /* Draw circle */
                cxt.beginPath();
                cxt.arc(25,25,20,0,Math.PI*2,true);
                cxt.stroke();
                cxt.closePath();
                content[canvasNumber-1] = 'O';
            }
/* The above code is a lot simpler than trying to check for turn%2 ===0 */

            //turn = turn + 1; // Now needed now as we are not checking
            painted[canvasNumber-1] = true;
            squaresFilled++;
            checkForWinners(content[canvasNumber-1]);

            if(squaresFilled==9){
                alert("THE GAME IS OVER!");
                location.reload(true);
            }

        }
        else{
            alert("THAT SPACE IS ALREADY OCCUPIED WITH YOUR HEART!");
        }

    }

    function checkForWinners(symbol){

        for(var a = 0; a < winningCombinations.length; a++){
        if(content[winningCombinations[a][0]]==symbol&&content[winningCombinations[a][1]]== symbol&&content[winningCombinations[a][2]]==symbol){
            alert(symbol+ " WON!");
            playAgain();
        }
        }

    }

And this is the radio button code.

<div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <input type="radio" name="players" id="playerx" onclick="displayResult(this.value)" value = "playerx"/>
                    <label for="playerx"><b>TEAM - X</b></label>
                    <input type="radio" name="players" id="playery" onclick="displayResult(this.value)" value = "playery"/>
                    <label for="playery"><b>TEAM - O</b></label>                                      
                </fieldset>
            </div>

Hope somebody makes use of this. Thanks to everyone who helped. If you want to know more about how to use this then just leave a comment. I will try and help.

Changing a global variable value based on which radio button is selected

2 Answers2