How do you pass a button click as a function argument?

June 24, 2022

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coin Flip</title>
  </head>

  <body>
    <h1>Coin Flip</h1>
    <h3>Let's flip a coin! Choose heads or tails:</h3>

    <button onclick="flip()" id="choice">Heads</button>
    <button onclick="flip()" id="choice">Tails</button>

    <h3 id="guess"></h3>
    <h3 id="result"></h3>
    <h3 id="confirm"></h3>
  </body>
  <script src="scripts.js"></script>
</html>

function flip(choice) {
    // Declares random number variable
    var randomNumber=Math.floor(Math.random()*2)+1;

    // Conditional random win/loss
    if(randomNumber==1){
        document.getElementById("guess").innerHTML = "You guessed " + choice + "...";
        document.getElementById("result").innerHTML = "The coin flips and comes up Tails!";
        document.getElementById("confirm").innerHTML = "Good Guess!";
        
    }
    else {
        document.getElementById("guess").innerHTML = "You guessed " + choice + "...";
        document.getElementById("result").innerHTML = "The coin flips and comes up Heads!";
        document.getElementById("confirm").innerHTML = "Good Guess!";
    }
}

I am making a simple coin flipping game using HTML and JS. I am having trouble printing the choice the user makes (heads or tails). Is there a way to pass what button they clicked as the text "heads" or as the text" tails"? Check JS for text that will print out.

>Solution :

Just pass heads or tails as the parameter in the function call:

<button onclick="flip('Heads')" id="choice">Heads</button>
<button onclick="flip('Tails')" id="choice">Tails</button>

function flip(choice) {
    // Declares random number variable
    var randomNumber=Math.floor(Math.random()*2)+1;

    // Conditional random win/loss
    if(randomNumber==1){
        document.getElementById("guess").innerHTML = "You guessed " + choice + "...";
        document.getElementById("result").innerHTML = "The coin flips and comes up Tails!";
        document.getElementById("confirm").innerHTML = "Good Guess!";
        
    }
    else {
        document.getElementById("guess").innerHTML = "You guessed " + choice + "...";
        document.getElementById("result").innerHTML = "The coin flips and comes up Heads!";
        document.getElementById("confirm").innerHTML = "Good Guess!";
    }
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coin Flip</title>
  </head>

  <body>
    <h1>Coin Flip</h1>
    <h3>Let's flip a coin! Choose heads or tails:</h3>

    <button onclick="flip('Heads')" id="choice">Heads</button>
    <button onclick="flip('Tails')" id="choice">Tails</button>

    <h3 id="guess"></h3>
    <h3 id="result"></h3>
    <h3 id="confirm"></h3>
  </body>
  <script src="scripts.js"></script>
</html>