CODEWITHSUNDEEP
javascripthtmlinputcompare
MathiasH
MathiasH

Reputation: 13

Compare input and number

Yesterday i wanted to try out javascripting in html documents and tried to create a simple roulette "game".

I can understand the code generate a number and display it. But im having difficulities using if statements to check the generated number displayed and the value in my input field. If i select 1 and it rolls 1 i get "You lost!"

Here is my code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Web Roulette</title>
</head>

<body>
  <p id="number" value="">&nbsp;</p>
  <form id="form3" name="form3" method="post" action="">
    <label>
      <input type="radio" name="rollSelection" value="0" id="rollSelection_0" />0
    </label>
    <br />
    <label>
      <input type="radio" name="rollSelection" value="1" id="rollSelection_1" />1
    </label>
    <br />
  </form>
  <form name="form2" method="post" action="" onsubmit="genNr(); return false">
    <!--<label>Bet:
      <input name="betInput" type="text" id="betInput" size="5" />
    </label>//-->
    <input type="submit" name="placeBet" id="placeBet" value="Roll" onclick="genNr();" />
    <p id="roll">???</p>
    <!--<p id="money">Money:</p>//-->
  </form>

  <script type="text/javascript">
    var userBet = 0;

    function genNr() {
      if (document.getElementById('rollSelection_0').checked) {
        userbet = 0;
      } else if (document.getElementById('rollSelection_1').checked) {
        userbet = 1;
      }
      document.getElementById('number').innerHTML = Math.floor(Math.random() * 2) + 0;

      if (parseInt(document.getElementById('number').innerHTML) == userBet) {
        document.getElementById('roll').innerHTML = "You Win!";
        //document.getElementById('money').innerHTML = "Money: " + betInput * 2;

      }
      if (parseInt(document.getElementById('number').innerHTML) != userBet) {
        document.getElementById('roll').innerHTML = "You Lost!";
      }

    }
  </script>
</body>

</html>

Upvotes: 1

Views: 116

Answers (1)

Pete
Pete

Reputation: 58422

Javascript is case sensitive so you check against userBet which is set to 0 and never changes.

In you getNr function you set userbet - change this to userBet and it will work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Web Roulette</title>
</head>

<body>
  <p id="number" value="">&nbsp;</p>
  <form id="form3" name="form3" method="post" action="">
    <label>
      <input type="radio" name="rollSelection" value="0" id="rollSelection_0" />0
    </label>
    <br />
    <label>
      <input type="radio" name="rollSelection" value="1" id="rollSelection_1" />1
    </label>
    <br />
  </form>
  <form name="form2" method="post" action="" onsubmit="genNr(); return false">
    <label>Bet:
      <input name="betInput" type="text" id="betInput" size="5" />
    </label>
    <input type="submit" name="placeBet" id="placeBet" value="Roll" onclick="genNr();" />
    <p id="roll">???</p>
    <!--<p id="money">Money:</p>//-->
  </form>

  <script type="text/javascript">
    var userBet = 0;

    function genNr() {
      if (document.getElementById('rollSelection_0').checked) {
        userBet = 0;
      } else if (document.getElementById('rollSelection_1').checked) {
        userBet = 1;
      }
      document.getElementById('number').innerHTML = Math.floor(Math.random() * 2) + 0;

      if (parseInt(document.getElementById('number').innerHTML) == userBet) {
        document.getElementById('roll').innerHTML = "You Win!";
        //document.getElementById('money').innerHTML = "Money: " + betInput * 2;

      }
      if (parseInt(document.getElementById('number').innerHTML) != userBet) {
        document.getElementById('roll').innerHTML = "You Lost!";
      }

    }
  </script>
</body>

</html>

If you want to make the function a little better, you can do the following:

function genNr() {
  userBet = parseInt(document.querySelector('input[name="rollSelection"]:checked').value); // use query selector to get the value of the input (instead of lots of ifs)

  var number = Math.floor(Math.random() * 2); // set this as a variable so you don't need to use innerHtml in the if below
  document.getElementById('number').innerHTML = number;

  if (number == userBet) {
    document.getElementById('roll').innerHTML = "You Win!";
  } else {  // use an else instead of another if, if you have more options, use an else if
    document.getElementById('roll').innerHTML = "You Lost!";
  }

}

Upvotes: 1

Related Questions