I'm trying to create a coin flip game, with a button for both guessing heads and tails with appropriate outputs for the guess - you guessed x, and the answer is x, you're correct/you guessed x and the answer is y, you're incorrect. I'm new to JS, and I'm struggling to find out why I'm not having results for the game when buttons are clicked.
document.getElementById('flipHeads').onclick = click; var flipHeads = Math.round(Math.random()) + 1; function click(flipHeads) { if (coinFlip == 1) { var Result = "flipHeads"; } else { var Result = "flipTails"; } if (Result == flipHeads) { if (Result == "heads") { alert("The flip was heads and you chose heads...you win!"); } else { alert("The flip was tails and you chose heads...you lose!"); } } } document.getElementById('flipTails').onclick = click; function click(flipTails) { var flipTails = Math.round(Math.random()) + 1; if (Result == fliptails) { alert("The flip was heads and you chose tails...you lose!"); } else { alert("The flip was tails and you chose tails...you win!"); } } function flip(flipHeads) { document.getElementById("result").innerHTML = Heads; }; function flip(flipTails) { document.getElementById("result").innerHTML = Tails; };
<div> <button id="flipHeads" type="button">Heads</button> <button id="flipTails" type="button">Tails</button> <div id="result"></div> </div>
I simplified your code and made it actually work. I will go step by step through the changes:
div
and ID (flip). Then I changed the ID of the button to just Heads
or Tails
.eventListener
that looks for a click event within the div id="flip"
button
and not the containing element itself.Heads
or Tails
Heads
or Tails
/* checks for a click event within the div id="flip" */ const onClick = (event) => { /* checks if a button was clicked */ if (event.target.nodeName === 'BUTTON') { /* gets the ID of the clicked button as string */ var choice = event.target.id; /* Array to roll between different strings over then a number */ var roll = [ 'Heads', 'Tails' ]; var flip = roll[Math.floor(Math.random() * roll.length)]; /* checks if the flip and the pick is the same */ if (choice == flip) { var result = ' ...you win!'; } else { var result = ' ...you lose!'; } /* outputs the result */ alert('The flip was ' + flip + ' and you chose ' + choice + result); } } document.querySelector('#flip').addEventListener('click', onClick);
<div id="flip"> <button id="Heads" type="button">Heads</button> <button id="Tails" type="button">Tails</button> <div id="result"></div> </div>
There are several errors you've made in the code; here are some of them that I could find, but there are more:
document.getElementById(
[element] ).onClick = click
won't work - there should be parentheses after click
( click()
) if (Results == fliptails)
, you misspelled the flipTails
variable as fliptails
.document.getElementById("result").innerHTML = Heads
tries to set the innerHTML
of the results element to be equal to the variable Heads
, which doesn't exist. You should wrap it in quotes (ie "Heads"
), to set the innerHTML to the string "Heads". Likewise with [...] = Tails
.There's also quite a bit of confusion here, and in general the code is quite hard to salvage. Thankfully however, there's a much more efficient way of accomplishing your goal. Here's an example of functional, more efficient code for this - which I'll walk through:
function flip(guess) { let sideLandedOn = Math.round(Math.random()) == 0 ? 'heads' : 'tails'; // "flip" coin document.getElementById("result").innerHTML = sideLandedOn; // set innerHTML of results element to side that coin landed on if (guess == sideLandedOn) { alert(`The coin landed on ${sideLandedOn} and you guessed ${guess}... you win!`); // alert user won } else { alert(`The coin landed on ${sideLandedOn} and you guessed ${guess}... you lose!`); // alert user lost } }
<div> <button id="flipHeads" type="button" onclick="flip('heads');">Heads</button> <button id="flipTails" type="button" onclick="flip('tails');">Tails</button> <div id="result"></div> </div>
So, here's what's going on in the snippet:
flip()
function, passing to it a parameter ( guess
) representing which side was guessed.let sideLandedOn = Math.round(Math.random()) == 0 ? 'heads' : 'tails'
) basically "flips" the coin by randomly generating a number that is either 0 or 1, and then deciding it is heads if it is 0, and tails if it is 1 via the conditional/ternary operator. The line is effectively equivalent to this:let sideLandedOn;
if (Math.round(Math.random()) == 0) {
sideLandedOn = 'heads';
} else {
sideLandedOn = 'tails';
}
innerHTML
of the result
div to be equal to sideLandedOn.Note: the template literal
`The coin landed on ${sideLandedOn} and... `
is effectively equivalent to
"The coin landed on " + sideLandedOn + " and..."
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.