playerSelection（）没有返回，但它传递了一个字符串值？[石头剪刀布游戏]-解网

问：

您好，我目前正在重温 html/css/javascript 中的石头剪刀布游戏。现在我正在尝试制作一个相应的网站，您可以在其中单击该按钮，它会以这种方式记录您的playerChoice。之后，它将开始游戏并打印获胜者、回合等。。似乎playerSelection函数无法正常工作。playerChoice = this.id 似乎工作正常，但 playerSelection 函数没有控制台记录任何内容。我还想知道我是否需要更改任何内容才能将字符串从函数中取出并进行比较（参见 playRound 函数）。如果您碰巧对此有所了解，请告诉我:)

这是我的HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js" type="text/javascript"></script>
    <title>Rock, Paper, Scissors</title>
</head>
<body>
    <h1>Rock, Paper, Scissors</h1>
    <p>Play against the computer. First to 5 points wins the game!</p>
    <h2>Select a Move:</h2>

    <div id="Buttons">
        <button id="ROCK">ROCK</button>
        <button id="PAPER">PAPER</button>
        <button id="SCISSORS">SCISSORS</button>
    </div>
    
    <p id="roundTxt"></p>

    <h2>Scores:</h2>

    <ul id="scoresBox">
        <h3>Player: </h3>
        <div id="SCORES_HUMAN">0</div>
        <h3>Computer: </h3> 
        <div id="SCORES_COMPUTER">0</div>
    </ul>
</body>
</html>

这是我的javascript：

document.getElementById("ROCK").onclick = playerSelection;
document.getElementById("PAPER").onclick = playerSelection;
document.getElementById("SCISSORS").onclick = playerSelection;



function getComputerChoice (){
    //select Rock Paper or Scissors at random
    //return the choice
    const PICK = ["Rock", "Paper", "Scissors"];

    const random = Math.floor(Math.random() * PICK.length);
    return (PICK[random]);

}

function playerSelection() {
    //prompt user for their choice
    //return the choice
    //let playerChoice = prompt("Rock, Paper, or Scissors?");
    playerChoice = this.id;
    return playerChoice;
}
console.log(playerSelection());


function game() {
    //Scoreboard
    let SCORES_HUMAN = 0;
    let SCORES_COMPUTER = 0;

    //for(let i = 0; i<5; i++) {
        playRound(playerSelection(), getComputerChoice());
        console.log(playRound(playerSelection(), getComputerChoice()));
        
    //}

    if(SCORES_HUMAN > SCORES_COMPUTER) {
        console.log("You Win!");
    } else if(SCORES_HUMAN < SCORES_COMPUTER) {
        console.log("You Lose!");
    }
    
    console.log("HUMAN: "+ SCORES_HUMAN +" COMPUTER: "+ SCORES_COMPUTER);


    function playRound(playerSelection, getComputerChoice) {
        //compare playerSelection to getComputerChoice
        //return the outcome
        if (playerSelection === "ROCK" && getComputerChoice === "Scissors") {
            SCORES_HUMAN++;
            return "You Win! Rock beats Scissors";
        } else if (playerSelection === "ROCK" && getComputerChoice === "Paper") {
            SCORES_COMPUTER++;
            return "You Lose! Paper beats Rock";
        } else if (playerSelection === "PAPER" && getComputerChoice === "Rock") {
            SCORES_HUMAN++;
            return "You Win! Paper beats Rock";
        } else if (playerSelection === "PAPER" && getComputerChoice === "Scissors") {
            SCORES_COMPUTER++;
            return "You Lose! Scissors beats Paper";
        } else if (playerSelection === "SCISSORS" && getComputerChoice === "Paper") {
            SCORES_HUMAN++;
            return "You Win! Scissors beats Paper";
        } else if (playerSelection === "SCISSORS" && getComputerChoice === "Rock") {
            SCORES_COMPUTER++;
            return "You Lose! Rock beats Scissors";
        } else {
            return "It's a tie!";
        }

    }
}

game();

这是我的css：

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-left: 50px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

p {
    font-size: 18px;
  }

button {
    border: .3rem solid rgb(255, 0, 0);
    border-radius: .5rem;
    margin: .75rem;
    font-size: 1rem;
    font-weight: bold;
    padding: .75rem .5rem;
    width: 6rem;
    text-align: center;
    color: white;
    background: rgb(89, 89, 89);
    text-shadow: 0 0 .5rem rgb(229, 229, 229);
}

button:hover {
    cursor: pointer;
}

button:active {
    background-color: rgba(92, 92, 92, 0.208);
}


.Buttones {
    flex: display;
    align-self: center;
}

我感谢我得到的任何帮助，并感谢您阅读:)

单击岩石按钮（或纸/剪刀按钮）会将字符串“rock”传递到游戏回合功能中，游戏将正确进行。

javascript html css onclick getelementbyid

@Stitt所以在阅读了您的评论后（顺便说一句，感谢您的快速回答），我将代码调整为：第 24 行：console.log（playerSelection（））;第 33 行： playRound（playerSelection（）， getComputerChoice（））;完成后，控制台 .log 不会执行任何操作（至少如果我做对了）。不幸的是，关于无争论游戏的另一件事也没有改变一件事（也许我又犯了一个错误）？我也会将问题中的上述代码编辑到新添加的内容中。

答：

0赞 Ahmed Qasem 9/3/2023 #1

因为 playerSelection 函数中的 'this' 指向的是函数，而不是事件。将事件参数传递给 playerSelection 函数

function playerSelection(e) { ... }

0赞 Stitt 9/3/2023 #2

代码存在许多问题。

调用两次：playRound()

playRound(playerSelection(), getComputerChoice());
console.log(playRound(playerSelection(), getComputerChoice()));

我知道你试图看看在做什么，但实际上这是在每个“回合”执行两次。您已经在中返回了文本语句，因此playRound()playRound()

将您的 s 更改为 s，然后调用或returnconsole.log()playRound(playerSelection(), getComputerChoice())
删除不在中的调用，并保持原样。playRound()console.log()playRound()

正如上面 Ahmed 所提到的，您传递的不是单击事件，而是对函数本身的引用。您需要收听按下按钮时发出的事件，以便正确处理玩家的选择
一个小问题，但您在 html 文档中提到第一个获得 5 的玩家获胜，但是您只允许使用您的（注释掉的）for 循环进行 5 轮比赛。相反，请使用如下所示的 while 循环：

while (SCORES_HUMAN < 5 and SCORES_COMPUTER < 5){
    playRound(playerSelection(), getComputerChoice());
}

编辑更新以包含 JS 代码的工作示例。没有对 HTML 或 CSS 的相关更改。

function getComputerChoice (){
    //select Rock Paper or Scissors at random
    //return the choice
    const PICK = ["Rock", "Paper", "Scissors"];

    const random = Math.floor(Math.random() * PICK.length);
    return (PICK[random]);

}

let SCORES_HUMAN = 0;
let SCORES_COMPUTER = 0;

const SCORES_HUMAN_TEXT = document.getElementById("SCORES_HUMAN");
const SCORES_COMPUTER_TEXT = document.getElementById("SCORES_COMPUTER");

const ROCK = document.getElementById("ROCK");
const PAPER = document.getElementById("PAPER");
const SCISSORS = document.getElementById("SCISSORS");


function updateScores() {
  SCORES_HUMAN_TEXT.innerHTML = SCORES_HUMAN
  SCORES_COMPUTER_TEXT.innerHTML = SCORES_COMPUTER
}


ROCK.addEventListener("click", function (e){
  playRound ("ROCK");

});
PAPER.addEventListener("click", function (e){
  playRound("PAPER");

});
SCISSORS.addEventListener("click", function (e){
  playRound("SCISSORS");

});



function game() {
    //Scoreboard

    /*
    while (SCORES_HUMAN < 5 && SCORES_COMPUTER < 5){
        playRound(playerSelection(), getComputerChoice());
    }
        
        console.log(playRound(playerSelection(), getComputerChoice()));
    */    
    

    if(SCORES_HUMAN > SCORES_COMPUTER) {
        console.log("You Win!");
    } else if(SCORES_HUMAN < SCORES_COMPUTER) {
        console.log("You Lose!");
    }
    
    console.log("HUMAN: "+ SCORES_HUMAN +" COMPUTER: "+ SCORES_COMPUTER);

}

function playRound(playerSelection) {
  computerChoice = getComputerChoice()
  //compare playerSelection to getComputerChoice
  //return the outcome
  if (playerSelection === "ROCK" && computerChoice === "Scissors") {
    SCORES_HUMAN++;
    // return "You Win! Rock beats Scissors";
  } else if (playerSelection === "ROCK" && computerChoice === "Paper") {
    SCORES_COMPUTER++;
    // return "You Lose! Paper beats Rock";
  } else if (playerSelection === "PAPER" && computerChoice === "Rock") {
    SCORES_HUMAN++;
    // return "You Win! Paper beats Rock";
  } else if (playerSelection === "PAPER" && computerChoice === "Scissors") {
    SCORES_COMPUTER++;
    // return "You Lose! Scissors beats Paper";
  } else if (playerSelection === "SCISSORS" && computerChoice === "Paper") {
    SCORES_HUMAN++;
    // return "You Win! Scissors beats Paper";
  } else if (playerSelection === "SCISSORS" && computerChoice === "Rock") {
    SCORES_COMPUTER++;
    // return "You Lose! Rock beats Scissors";
  } else {
    // return "It's a tie!";
  }
  updateScores()
}


//game();

您好，感谢您的详细回答！关于第2点。，我试着这样做：链接到代码图像链接。如果我控制台记录返回行，我会得到所需的输出。所以我想，如果我可以将它们返回给 playerSelection，我可以使用“ROCK”、“PAPER”或“SCISSORS”，如果作为字符串单击，因此在 playerRound 函数中。第 1/2 部分code

0赞 Korekollum 9/4/2023

链接第 2/2 部分我还考虑过仅通过按钮而不是按 id 元素来完成。例如，“click”，function（e）{ if（button content == “ROCK）{ return ”Rock“}else if（button content == Paper）{ return ”paper“，依此类推。但现在我正在搜索如何将 id 作为字符串值返回给 playerselection，以便它可以在游戏回合中使用。我稍后可能会将单个按钮作为一个功能。一如既往地感谢您的帮助和解释！@Stittcodepen

0赞 Korekollum 9/4/2023

编辑：我忘了给你我的坏@Stitt

0赞 Korekollum 9/4/2023

顺便说一句，我第一次尝试时，我在 playerSelection 函数之外有整个东西，如下所示：链接 code how it was first

0赞 Stitt 9/4/2023

看看你的codepen，我做了一些更改，以便基本功能就在那里！如果您有任何问题，请随时提出，但是我已经将玩家达到5分后让游戏结束的练习留给了您

上一个：滚动动画后，提交表单上所需的工具提示不会显示

下一个：不能在函数外部使用 const/var

playerSelection（） 没有返回，但它传递了一个字符串值？[石头剪刀布游戏]

playerSelection() is not returning but its getting passed a string value? [Rock paper scissors game]

评论

评论

playerSelection（）没有返回，但它传递了一个字符串值？[石头剪刀布游戏]