Простой счетчик в JS и HTML

Question

Я пытаюсь сделать простой счетчик, который позволяет пользователю вводить номер и нажимать кнопку, которая затем будет минус их число от 100 до тех пор, пока счетчик не достигнет 0. это HTML и JavaScript код:

HTML:

<div class="box">  
      <label for="qty"><abbr title="Quantity">Qty</abbr></label> 
      <input id="qty" type="number" max="100" /> 
      <button id="down" onclick="modify_qty(-qty)">Book</button> 

     </div> 

JavaScript:

function modify_qty(val) { 
     var qty = document.getElementById('qty').value; 
     var new_qty = parseInt(qty,10) + val; 

     if (new_qty == -1) { 
      new_qty = 0; 
      alert("Sorry Tickets Have Now Sold Out"); 
     } 
     document.getElementById('qty').value = new_qty; 
     return new_qty; 
    } 

проблема заключается в том, когда пользователь вводит номер и нажимает на кнопку, номер исчезает. Например: max равно 100, если я вхожу 10, он должен вернуть 90. Но он ничего не возвращает.

Answer 1

Я добавил еще один ярлык, чтобы отслеживать оставшиеся билеты вместо того, чтобы положить оставшуюся сумму на вход.

Использование переменной ticketsLeft в javascript помогает отслеживать билеты, не полагаясь на наш html для хранения значений для нас.

Fiddle

Javascript

var ticketsLeft = 100; 
var qty = document.getElementById('qty'); 
var remaining = document.getElementById('remaining'); 

remaining.innerHTML = ticketsLeft; 

function modify_qty() { 
     var new_qty = ticketsLeft - parseInt(qty.value, 10); 
     if (new_qty < 0) { 
      ticketsLeft = 0; 
      remaining.innerHTML = 0; 
      alert("Sorry Tickets Have Now Sold Out"); 
      return; 
     } 
     ticketsLeft = new_qty; 
     remaining.innerHTML = new_qty; 
     return new_qty; 
} 

HTML

<div class="box">  
    <label for="qty"><abbr title="Quantity">Qty</abbr></label> 
    <input id="qty" type="number" max="100" /> 
    <button id="down" onclick="modify_qty()">Book</button> 
    <label>Tickets Remaining: <label id="remaining"></label></label> 
</div>