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