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

Answer 2

这里有一大堆问题。最大的似乎是：

• 您在假设player1Choice 是一个字符串值（例如player1Choice == "Rock"）和假设它是一个函数（player1Choice("Paper")）之间交替。即使你假设它是一个函数，你也假设它返回一个布尔真/假值 (if (player1Choice("Paper")))，而你的函数实际上返回一个字符串值 ("Paper")。因此，每次检查 player1Choice 或 player1Choice("Paper") 时，它都会评估为 true，这显然是行不通的。