比较输入和数字

昨天我想在html文档中尝试javascripting，并尝试创建一个简单的轮盘赌"游戏"。

我可以理解代码生成一个数字并显示它。但是我使用 if 语句来检查显示的生成数字和输入字段中的值有困难。如果我选择 1 并且它滚动 1，我会得到"你输了！

这是我到目前为止的代码：

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

Javascript 区分大小写，因此您可以检查设置为 0 且永不更改的userBet。

在你设置getNr userbet函数中 - 将其更改为userBet它将起作用：

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

如果你想使功能更好一点，你可以执行以下操作：

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!";
  }
}

相关内容

最新更新

热门标签：