Problems getting the right value returned in a javascript function

Question

What I'm trying to do is simulate a simple paper, rock, scissors game within a page, where one player selects r/p/s with radio buttons, submits his choice, and player 2 does the same.

I have no doubt there are multiple problems to this code, but I see really weird stuff returned whenever I try and run the function that resolves the rock/paper/scissors. I always get a true on the:

else if (player1Choice("Rock") && player2Choice("Scissors")) {
        $("resultOutput").value = "Player 1s Rock beats Player 2s Scissors";
    }

I get this back as my result every time. I've stared at the function so long I'm probably just blind to an obvious resolution at this point.

// create our $() shortcut function for easily retrieving elements by id
var $ = function(id) {
    return document.getElementById(id);
}

//function executed on page load
window.onload = function() {

    //clear any previous values
    document.forms[0].reset();

    //store value from player1Weapon radio choice with the player1Choice function
    $("player1Submit").onclick = player1Choice;

    //store value from player1Weapon radio choice with the player2Choice function
    $("player2Submit").onclick = player2Choice;

    //assign the fight button to run the fightCrunch function to determine the winner
    $("fight").onclick = fightCrunch;
}

var player1Choice = function(x){
    var a = "Paper";
    var b = "Rock";
    var c = "Scissors";
   //the html has several radio buttons with id's of "player1Paper", etc. the $ function is to get the id name, and then I'm doing if, else ifs to see which on is checked.
    if ($("player1Paper").checked) {
        return a;
}
else if ($("player1Rock").checked) {
    return b;
}
else if ($("player1Scissors").checked) {
    return c;
}
else {
    alert("Player 1, you need to pick a crude instrument of violence first");
}
};

var player2Choice = function(y){
    var d = "Paper";
    var e = "Rock";
    var f = "Scissors";
    //var d = $("player2Paper").value;
    //var e = $("player2Rock").value;
    //var f = $("player2Scissors").value;
    if ($("player2Paper").checked) {
        return d;
}
else if ($("player2Rock").checked) {
    return e;
}
else if ($("player2Scissors").checked) {
    return f;
}
else {
    alert("Player 2, you need to pick a crude instrument of violence first");
}
};

var fightCrunch = function(){
        //The next few lines are commented out because the if gets hung up on this part, this always comes back as true no matter what I do with the previous functions.
    //if (player1Choice || player2Choice == undefined) {
        //alert("Both players need to select and submit a weapon of choice before a winner is determined");
    //}
    if (player1Choice && player2Choice == "Rock") {
        $("resultOutput").value = "Both players chose Rock, which results in a stalemate";
    }
    else if (player1Choice && player2Choice == "Paper") {
        $("resultOutput").value = "Both players chose Paper, which results in a stalemate";
    }
    else if (player1Choice && player2Choice == "Scissors") {
        $("resultOutput").value = "Both players chose Scissors, which results in a stalemate";
    }
    else if (player1Choice("Rock") && player2Choice("Scissors")) {
        $("resultOutput").value = "Player 1s Rock beats Player 2s Scissors";
    }
    else if (player1Choice("Rock") && player2Choice("Paper")) {
        $("resultOutput").value = "Player 2s Paper beats Player 1s Rock";
    }
    else if (player1Choice("Paper") && player2Choice("Rock")) {
        $("resultOutput").value = "Player 1s Paper beats Player 2s Rock";
    }
    else if (player1Choice("Paper") && player2Choice("Scissors")) {
        $("resultOutput").value = "Player 2s Scissors beats Player 1s Paper";
    }
    else if (player2Choice("Paper").value && player1Choice("Scissors")) {
        $("resultOutput").value = "Player 1s Scissors beats Player 2s Paper";
    }
    else if (player2Choice("Rock").value && player1Choice("Scissors")) {
        $("resultOutput").value = "Player 2s Rock beats Player 1s Scissors";
    }
    else {
        alert("something is wrong here");
    }
}

Create this in a jsfiddle.net and I will make it work for you. — Kory Hodgson
– Kory Hodgson, Commented Feb 7, 2012 at 18:47
jsfiddle.net/bennythedroid/ELFXc Posted. Thanks in advance for your input! — Benny
– Benny, Commented Feb 7, 2012 at 23:27

caleb · Accepted Answer · 2012-02-07 23:34:53Z

Your code has quite a few problems. But the problem you are asking about stems from the way you are doing comparison.

You cannot do this:

if (player1Choice && player2Choice == "Rock")

What that meant is essentially:

if ((player1Choice == true) && (player2Choice == "Rock"))

Instead, you want to write it this way (but it will still not work because of many other errors):

if (player1Choice == player2Choice) {
    $("resultOutput").value = "Both players chose " + player1Choice + ", which results in a stalemate";
}

Not only do you have less comparison operations, you also save many lines of code!

Do note that you have additional typos in the last 2 comparisons where you added ".value" erroneously.

On top of that, you might want to note that the functions player1Choice and player2Choice are not variables. You have specified for them to be event handlers for click events. The values they return go no where and will not be received by the fightcrunch function.

I do not really want to spoil your fun with making this program, but if you do give up, you can see corrected and functional code here (it is tabbed to the right in case you do not want to see it):

                                                                                <form>
                                                                                    Player 1
                                                                                    <select id="player1">
                                                                                        <option value="0" selected>Paper</option>
                                                                                        <option value="1">Rock</option>
                                                                                        <option value="2">Scissors</option>
                                                                                    </select>

                                                                                    Player 2
                                                                                    <select id="player2">
                                                                                        <option value="0" selected>Paper</option>
                                                                                        <option value="1">Rock</option>
                                                                                        <option value="2">Scissors</option>
                                                                                    </select>

                                                                                    <input type="submit" id="fight" value="Fight">
                                                                                </form>

                                                                                <div id="resultOutput"></div>


                                                                                <script> 
                                                                                    // create our $() shortcut function for easily retrieving elements by id
                                                                                    var $ = function(id) {
                                                                                        return document.getElementById(id);
                                                                                    }

                                                                                    //function executed on page load
                                                                                    window.onload = function() {

                                                                                        //clear any previous values
                                                                                        document.forms[0].reset();

                                                                                        $("fight").onclick = fightCrunch;
                                                                                    }

                                                                                    var fightCrunch = function(){

                                                                                        var choices = ["Paper", "Rock", "Scissors"];
                                                                                        var player1 = $("player1").value;
                                                                                        var player2 = $("player2").value;
                                                                                        var result = "";
                                                                                        var diff = player1 - player2;

                                                                                        if (!diff)
                                                                                            result = "Both players chose " + choices[player1] + ", which results in a stalemate";
                                                                                        else if (diff == -1 || diff == 2)
                                                                                            result = "Player 1's " + choices[player1] + " beats Player 2's " + choices[player2];
                                                                                        else
                                                                                            result = "Player 2's " + choices[player2] + " beats Player 1's " + choices[player1];

                                                                                        $("resultOutput").innerHTML = result;
                                                                                        return false;
                                                                                    }

                                                                                </script>

Good luck!

Edit: Using return and global variables

var player1Choice, player2Choice;

window.onload = function () {

    //clear any previous values
    document.forms[0].reset();

    //store value from player1Weapon radio choice with the getPlayer1Choice function
    $("player1Submit").onclick = function () {
        player1Choice = getPlayer1Choice();
    };

    //store value from player1Weapon radio choice with the getPlayer2Choice function
    $("player2Submit").onclick = function () {
        player2Choice = getPlayer2Choice();
    };

    //assign the fight button to run the fightCrunch function to determine the winner
    $("fight").onclick = fightCrunch;
}

function getPlayer1Choice () {
    //...
    // return ...;
}

function getPlayer2Choice () {
    //...
    // return ...;
}

OK, so with my click event handlers, I was trying to make functions that would store the values of the selected radio buttons. What's the easiest way to make something run at the onclick and then return the button or label values, and then to be accessible by the fightCrunch function? A big part of what I'm doing is getting practice with functions and return statements. I know it looks convoluted (and yes, your code works very well, thank you!), but the extra around-the-corner here is to satisfy some assignment requirements. And thanks again for your input!
I see. In that case you'd need global variables, and store them some where. I'll make another edit.

nrabinowitz · Accepted Answer · 2012-02-08 04:53:11Z

1

There are a whole bunch of issues here. The biggest one seems to be:

You are alternating between assuming player1Choice is a string value (e.g. player1Choice == "Rock") and assuming it's a function (player1Choice("Paper")). Even when you assume it's a function, you assume it returns a boolean true/false value (if (player1Choice("Paper"))), when it looks like your function actually returns a string value ("Paper"). So every single time you check either player1Choice or player1Choice("Paper"), it will evaluate to true, which is clearly not going to work.

edited Feb 8, 2012 at 4:53

answered Feb 7, 2012 at 18:57

nrabinowitz

55.7k10 gold badges152 silver badges169 bronze badges

1 Comment

caleb Over a year ago

He is not using jQuery. He defined $ as an alias for document.getElementById

Collectives™ on Stack Overflow

Problems getting the right value returned in a javascript function

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related