Coin Flip Game JS/HTML

Question

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>

Answer 1

I simplified your code and made it actually work. I will go step by step through the changes:

1. I gave the containing div and ID (flip). Then I changed the ID of the button to just Heads or Tails.
2. I used an eventListener that looks for a click event within the div id="flip"
3. this event looks if the element that was clicked on is a button and not the containing element itself.
4. The script stores the ID of the clicked element as variable which is either Heads or Tails
5. Then it randomly rolls from an array to get a result that is either Heads or Tails
6. Last but not least it compares the ID of the clicked button with the rolled "flip". Depending if both strings are identical it outputs a result. The "flip" as well as the "pick" are included as variables to shorten the code.

/* 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>

Answer 2

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())
• In if (Results == fliptails), you misspelled the flipTails variable as fliptails.
• The line 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 (i.e. "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:

• On the HTML side, when either button is clicked, it calls the flip() function, passing to it a parameter (guess) representing which side was guessed.
• On the JS side, after a button is clicked, the first line of code in the flip function (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';
}

• Then, we set the innerHTML of the result div to be equal to sideLandedOn.
• Then, we use a conditional to check if the user guessed correctly. An alert is generated displaying what side the coin landed on and what the user guessed, and whether they won or lost.

Note: the template literal

`The coin landed on ${sideLandedOn} and... `

is effectively equivalent to

"The coin landed on " + sideLandedOn + " and..."