将值从按钮传递到 function 中的参数或变量

Question

im trying to make this "rock, paper, scissors" work using buttons.

I'm trying two different ways but i dont know how to achieve it:

1st way: Pass to the parameter playerSelection in function playRound(playerSelection, computerSelection the correct parameter when we click on the buttons in the html

or

2nd way: Pass to variable var playerSelection inside function playRound(playerSelection, computerSelection the correct value when we click on the buttons in the html.

 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

You likely want something more like this

I use an array to count

 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>