在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; 
    } 

當用戶輸入一個號碼並按壓按鈕的問題是，數消失。例如：最大值是100，如果我輸入10，它應該返回90.但它什麼也沒有返回。

Answer 1

我添加了另一個標籤來追蹤剩餘票據，而不是將剩餘金額留在輸入中。

在javascript中使用ticketsLeft變量有助於跟蹤票證而不依賴於我們的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>