CODEWITHSUNDEEP
javascript
Elitezen
Elitezen

Reputation: 91

JavaScript Coin Flip "You Win/lose" Message Not Working

I have this coin toss function , so far it correctly displays "Heads" or "Tails" randomly. However, I want a message to appear saying "You win" whenever the coin lands on heads. But right now it only displays "You loose" regardless of which side the coin landed on. How can I fix this?

<DOCUTYPE html>

  <head>
    <title>Coin Toss V1</title>
    <style>

    </style>
  </head>

  <body>
    <button id="click" type="button">CLICK ME</button>
    <p>
      <b> You got:</b> <span id="result"></span>
    </p>
    <script>
      document.getElementById('click').onclick = click;

      var heads = 0;
      var tails = 0;

      function click() {
        x = (Math.floor(Math.random() * 2) == 0);
        if (x) {
          flip("heads");
        } else {
          flip("tails");
        }
      };

      function flip(coin) {
        document.getElementById("result").innerHTML = coin;
      };

      if (x == "heads") {
        document.write("you win!");
      } else {
        document.write("you loose");
      }
    </script>
  </body>
</DOCUTYPE>

Upvotes: 2

Views: 638

Answers (5)

Elliot B.
Elliot B.

Reputation: 17661

There are a number of issues with your sample code -- this answer will help resolve the most pressing problem.

I would suggest re-structure your click function as follows:

function click() {
    x = (Math.floor(Math.random() * 2) == 0);
    if (x) {
      flip("heads");
      document.write("you win!");
    } else {
      flip("tails");
      document.write("you loose");
    }
};

And remove the following block of code:

  if (x = heads) {
    document.write("you win!");
  } else {
    document.write("you loose");
  }

A few things worth pointing out:

  1. heads is different than "heads". The former represents a specific string variable while the latter is a string value.
  2. = differs from ==. The former assigns a value to a variable while the latter makes a equality comparison.
  3. Inside click, you are assigning x a value of true or false, so your if statement below should have compared x to true or false.
  4. In your original code, your bottom if statement fires immediately when the page is loaded -- before the click function is executed. It would make sense to move your document.write code inside your click function so that it can output the result of the coin flip click function.

I'd also suggest reading up about global variables (e.g., your variable x) and why they are problematic.

Upvotes: 3

nhom
nhom

Reputation: 1

You need to use two equals signs for the equality comparison operator, try:

if (x == heads)...

Other than that one line, you're not using the heads or tails variables. You can remove them and use

if (x)...

In your second if statement, just like you did in the first.

Upvotes: 0

colxi
colxi

Reputation: 8670

The result check, should be inside the funciton flip(), so it's executed each time the coin is flipped.

function flip(coin) {
    document.getElementById("result").innerHTML = coin;

    if (x = heads){
        document.write("you win!");
    } 
    else {
        document.write("you loose");
    }
};

Upvotes: -1

user9648303
user9648303

Reputation:

Be careful : you are assigning in your condition, not comparing! Put

if (x == heads)

instead of 

if (x = heads)

Otherwise you are assigning heads to x and then doing if(x) which always evaluates as false as long as heads = 0.

Upvotes: 1

yakubori
yakubori

Reputation: 59

You need to fix a bug here. You are assigning the value of heads to x, rather than doing a comparison.

if (x = heads){

Upvotes: 1

Related Questions