jquery - 如何连接为老虎机游戏添加数字 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>