Question

我正在制作摇滚，纸张，剪刀游戏，并希望将所选按钮的innerHTML传递给userChoice变量。

请参阅js的编解码器。

<button id="Rock" onclick="gameMechanism();">Rock</button>
<button id="Paper" onclick="gameMechanism();">Paper</button>
<button id="Scissors" onclick="gameMechanism();">Scissors</button>
<button id="Lizard" onclick="gameMechanism();">Lizard</button>
<button id="Spock" onclick="gameMechanism();">Spock</button>

var userChoice = document.getElementsByTagName('button').innerHTML;

function gameMechanism() {

    var computerChoice = Math.floor(Math.random() * 5);
    switch (computerChoice) {
    case 0:
        computerChoice = "Rock";
        break;
    case 1:
        computerChoice = "Paper";
        break;
    case 2:
        computerChoice = "Scissors";
        break;
    case 3:
        computerChoice = "Lizard";
    case 4:
        computerChoice = "Spock";
        break;
    }

    document.write("You have chosen" + " " + userChoice + ", " + "The Computer has chosen" + " " + computerChoice + ". ");

    var compare = function (choice1, choice2) {
        if (choice1 === choice2) {
            document.write("The result is a tie!");
        } else if (choice1 === "Rock") {
            if (choice2 === "Scissors") {
                document.write("Rock crushes Scissors!");
            } else if (choice2 === "Paper") {
                document.write("Paper covers Rock!");
            } else if (choice2 === "Spock") {
                document.write("Spock vaporizes Rock!");
            } else if (choice2 === "Lizard") {
                document.write("Rock crushes Lizard!");
            }
        } else if (choice1 === "Paper") {
            if (choice2 === "Scissors") {
                document.write("Scissors cuts Paper!");
            } else if (choice2 === "Rock") {
                document.write("Paper covers Rock!");
            } else if (choice2 === "Spock") {
                document.write("Paper disproves Spock");
            } else if (choice2 === "Lizard") {
                document.write("Lizard eats Paper!");
            }
        } else if (choice1 === "Scissors") {
            if (choice2 === "Rock") {
                document.write("Rock crushes Scissors!");
            } else if (choice2 === "Paper") {
                document.write("Scissors cuts Paper!");
            } else if (choice2 === "Spock") {
                document.write("Spock smashes Scissors!");
            } else if (choice2 === "Lizard") {
                document.write("Scissors decapitate Lizard!");
            }
        } else if (choice1 === "Lizard") {
            if (choice2 === "Scissors") {
                document.write("Scissors decapitates Lizard!");
            } else if (choice2 === "Rock") {
                document.write("Rock crushes Lizard!");
            } else if (choice2 === "Spock") {
                document.write("Lizard poisons Spock!");
            } else if (choice2 === "Paper") {
                document.write("Lizard eats Paper!");
            }
        } else {
            if (choice2 === "Rock") {
                document.write("Spock vaporizes Rock!");
            } else if (choice2 === "Paper") {
                document.write("Paper disproves Spock!");
            } else if (choice2 === "Lizard") {
                document.write("Lizard poisons Spock!");
            } else if (choice2 === "Scissors") {
                document.write("Spock smashes Scissors!");
            }
        }
    };

    compare(userChoice, computerChoice);
}

Answer 1

您正在使用代码选择所有按钮，因此无法获得正确/选定的值：

var userChoice = document.getElementsByTagName('button').innerHTML;

你可以尝试改变gameMechanism功能

function gameMechanism(element) {
    var userChoice = element.innerHTML;
}

然后将html更改为：

<button id="Rock" onclick="gameMechanism(this);">Rock</button>

Answer 2

只需将选项发送到gameMechanism（）方法，并在需要时在该方法中设置userChoice。

<button id="Rock" onclick="gameMechanism('ROCK');">Rock</button>

您需要更改gameMechanism（）方法声明，以便传入参数。

function gameMechanism(rpsChoice) { console.log('User chose ' + rpsChoice);

如何将元素的innerHTML传递给事件处理程序属性

2 个答案: