javascript - 在 JavaScript 函数中获取正确的值时出现问题

Question

我想做的是在一个页面中模拟一个简单的布、石头、剪刀游戏，其中一个玩家用单选按钮选择 r/p/s，提交他的选择，而玩家 2 也做同样的事情。

我毫不怀疑这段代码存在多个问题，但每当我尝试运行解决石头/剪刀/布的函数时，我都会看到返回的非常奇怪的东西。我总是能得到正确的答案:

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

我每次都会得到这个结果。我已经盯着这个函数很久了，此时我可能对明显的解决方案视而不见。

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

Answer 1

您的代码有很多问题。但你问的问题源于你进行比较的方式。

你不能这样做:

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

这本质上意味着:

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

相反，你想这样写(但由于许多其他错误，它仍然无法工作):

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

不仅减少了比较操作，还节省了很多代码行!

请注意，您在最后 2 次比较中还存在其他拼写错误，其中错误地添加了“.value”。

最重要的是，您可能需要注意函数 player1Choice 和 player2Choice 不是变量。您已将它们指定为单击事件的事件处理程序。它们返回的值无处可去，并且不会被 fightcrunch 函数接收。

我真的不想破坏你制作这个程序的乐趣，但如果你放弃了，你可以在这里看到更正的功能代码(如果你不想看到它，它会被标记在右侧):

                                                                                <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>

祝你好运!

编辑:使用返回变量和全局变量

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