將值從按鈕傳遞到 function 中的參數或變量

Question

我試圖使用按鈕使這種“石頭、紙、剪刀”工作。

我正在嘗試兩種不同的方法，但我不知道如何實現它：

第一種方式：在function playerSelection function playRound(playerSelection, computerSelection正確的參數當我們點擊html中的按鈕時選擇正確的參數)

或者

第二種方法：當我們點擊 html 中的按鈕時，將變量var playerSelection傳遞給function playRound(playerSelection, computerSelection中的變量 var playerSelection。

 function computerPlay() { let optionsList = ["rock", "paper", "scissors"]; let option = optionsList[Math.floor(Math.random() * optionsList.length)]; return option } function playRound(playerSelection, computerSelection) { var playerSelection =? ? ? ? ? ? ? var computerSelection = computerPlay(); if (playerSelection = "rock") { switch (computerSelection) { case "rock": return "T"; case "paper": return "M"; case "scissors": return "Y"; } } else if (playerSelection = "paper") { switch (computerSelection) { case "rock": return "Y"; case "paper": return "T"; case "scissors": return "M"; } } else if (playerSelection = "scissors") { switch (computerSelection) { case "rock": return "M"; case "paper": return "Y"; case "scissors": return "T"; } } } function playGame() { let i = 0 for (i = 1; i <= 3; i++) { let outcome = playRound() if (outcome == "M") { console.log("Machine Wins"); } else if (outcome == "Y") { console.log("You Win") } else if (outcome == "T") { console.log("Tie, try again") } } } let rockButton = document.querySelector("#rock"); let paperButton = document.querySelector("#paper"); let scissorsButton = document.querySelector("scissors"); rockButton.addEventListener("click", function() { playRound("rock") }); paperButton = addEventListener("click", function() { playRound("paper") }); scissorsButton = addEventListener("click", function() { playRound("scissors") }); let playButton = document.querySelector("#play") playButton.addEventListener("click", playGame)

 <title>ROCK PAPER SCISSORS</title> <script src="/rock_paper_scissors.js" async></script> <div class="buttons"> <button id="rock">ROCK</button> <button id="paper">PAPER</button> <button id="scissors">SCISSORS</button> </div> <div> <button id="play">PLAY!</button> </div> <div id="results"></div>

Answer 1

你可能想要更多這樣的東西

我用一個數組來計數

 function computerPlay() { let optionsList = ["rock", "paper", "scissors"]; let option = optionsList[Math.floor(Math.random() * optionsList.length)]; return option } function playRound(playerSelection) { var computerSelection = computerPlay(); if (playerSelection = "rock") { switch (computerSelection) { case "rock": return "T"; case "paper": return "M"; case "scissors": return "Y"; } } else if (playerSelection = "paper") { switch (computerSelection) { case "rock": return "Y"; case "paper": return "T"; case "scissors": return "M"; } } else if (playerSelection = "scissors") { switch (computerSelection) { case "rock": return "M"; case "paper": return "Y"; case "scissors": return "T"; } } } let cnt = 0, results = []; function playGame() { document.querySelector(".buttons").classList.remove("hide"); document.getElementById("results").textContent = ""; cnt= 0; results = []; } window.addEventListener("load", function() { const result = document.getElementById("results"); document.querySelector(".buttons").addEventListener("click",function(e) { const outcome = playRound(e.target.id.slice(1)) let text; if (outcome == "M") { text = "Machine Wins"; } else if (outcome == "Y") { text = "You Win" } else if (outcome == "T") { text = "Tie, try again" } results.push(outcome) results.sort(); if (results.length === 3) { const final = results.toString(); if (final.startsWith("YY")) text = "You won the match" else if (final.startsWith("MM")) text = "The computer won the match" else text = "You tied"; document.querySelector(".buttons").classList.add("hide"); } result.innerHTML = text; }); document.getElementById("play").addEventListener("click", playGame) })

 .hide { display:none; }

 <title>ROCK PAPER SCISSORS</title> <script src="/rock_paper_scissors.js" async></script> <div> <button id="play">PLAY!</button> </div> <div class="buttons hide"> <button id="rock">ROCK</button> <button id="paper">PAPER</button> <button id="scissors">SCISSORS</button> </div> <div id="results"></div>