如何连接为老虎机游戏添加数字html输入值的事件

Question

我正在尝试制作一台老虎机，而且我是编程新手，所以这对人们来说可能是一个简单的解决方案。

当我尝试这个时

var money = document.getElementsByName('money')[0].value;
var bet = document.getElementsByName('bet$')[0].value;

var winnings = Number(bet) + Number(money);
$('#money').val(winnings);

它只让我打赌输入的值是10

我希望将当前赌注添加到当前货币中，然后在货币输入框中显示金额。

这是我的HTML:

<div id="betbox">
  <button id="bet">Bet</button>
  <input type="number" id="bet$" name="bet$" value="10" />
</div>
<div id="moneybox">
  <input type="text" id="money" name="money" value="100" />
</div>

Answer 1

var current = $("#money"),
    bet = $("#bet$");
var updatedTotal = Number(current.val()) + Number(bet.val());
current.val(updatedTotal);

关于选择器、事件、dom操作等的文档都可以在这里找到。

http://jquery.com/

为了更进一步，你可以这样写：

<div id="betbox">
     <button id="bet">Bet</button>
     <input type="number" id="bet$" name="bet$" value="10" />
</div>
<div id="moneybox">
     <input type="text" id="money" name="money" value="100" />
</div>

然后您的脚本元素将如下所示：

<script type="text/javascript">
     $(function(){
          $("#bet").on("click",function(){
               var current = $("#money"),
                   bet = $("#bet$");
              var updatedTotal = Number(current.val()) + Number(bet.val());
              current.val(updatedTotal);
              FetchNextBet();
          });
     });
     function FetchNextBet()
     {
          var newBet = window.prompt("You win, please enter a new bet!");
          if(Number(newBet) > updatedTotal)
          {
                alert("You cannot bet more money than you have!");
                FetchNextBet();
          }
          else
          {
                bet.val(newBet);
          }
     }
</script>