Проблемы с получением правильного значения, возвращаемого в функции 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

Здесь есть целый ряд проблем.Кажется, самое большое из них:

• Вы чередуетесь, предполагая, player1Choice является строковым значением (например, player1Choice == "Rock"), и предполагая, что это функция (player1Choice("Paper")).Даже если вы предполагаете, что это функция, вы предполагаете, что она возвращает логическое значение true / false (if (player1Choice("Paper"))), когда похоже, что ваша функция на самом деле возвращает строковое значение ("Paper").Таким образом, каждый раз, когда вы проверяете player1Choice или player1Choice("Paper"), он оценивается как true, что явно не сработает.

Answer 2

У вашего кода довольно много проблем. Но проблема, о которой вы спрашиваете, проистекает из того, как вы проводите сравнение.

Вы не можете сделать это:

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>

Удачи!

Редактировать: Использование return и глобальных переменных

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