如何将按钮单击作为函数参数传递？

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.我正在使用 HTML 和 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"?有没有办法将他们单击的按钮作为文本“heads”或文本“tails”传递？ Check JS for text that will print out.检查 JS 是否有将打印出来的文本。

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.不要重复ID。 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>

如何将按钮单击作为函数参数传递？

问题描述

2 个解决方案

解决方案1
2 已采纳 2022-06-23 21:18:48

解决方案2
1 2022-06-23 21:41:33

如何将按钮单击作为函数参数传递？

问题描述

2 个解决方案

解决方案1 2 已采纳 2022-06-23 21:18:48

解决方案2 1 2022-06-23 21:41:33

解决方案1
2 已采纳 2022-06-23 21:18:48

解决方案2
1 2022-06-23 21:41:33