Question

I’m trying to make a slot machine and I’m new to programming, so this will probably be a easy fix for people.

When I try this

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


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

it only lets me bet the value of the input which is 10

I want to have the current bet to be added to the current money and then I want the sum to be displayed in the money input box.

Here’s my 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);

Documentation on selectors, events, dom manipulation, etc can all be found here.

http://jquery.com/

To take this a bit further you can write this in such a way that you have:

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

Then your script element will look like the following:

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