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

Question

<!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.

Answer 1

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>

Answer 2

Do not duplicate ids. For details see comments in the exanmple.

 // Bind click event to each <button> document.querySelectorAll('button').forEach(btn => btn.onclick = flip); // Define event handler -- pass Event Object function flip(e) { // Reference the <button> user clicked const picked = e.target; // Get the value of picked and convert string to number with '+' let side = +picked.value; // Get random integer in the range of 1 to 2 let outcome = Math.floor(Math.random()*2)+1; // Reference <output> const out = document.querySelector('output'); // If the value of picked equals the random number... if (side === outcome) { // Assign winning string with picked id interpolated out.value = `${picked.id}! You win!`; } else { // Otherwise assign losing string to <output> out.value = `${picked.id}! You lose!`; } }

 <!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> <p>Let's flip a coin! Choose heads or tails:</p> <button id='Heads' value='1'>Heads</button> <button id='Tails' value='2'>Tails</button> <p><output></output></p> </body> <script src="scripts.js"></script> </html>

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

Question

2 answers

solution1
2 ACCPTED 2022-06-23 21:18:48

solution2
1 2022-06-23 21:41:33

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

Question

2 answers

solution1 2 ACCPTED 2022-06-23 21:18:48

solution2 1 2022-06-23 21:41:33

solution1
2 ACCPTED 2022-06-23 21:18:48

solution2
1 2022-06-23 21:41:33