Простая javascript программа для отслеживания количества инвентаря

Question

У меня есть этот Javascript datastore, который является частью TiddlyWiki (fyi) для хранения продукта SKU. Однако я не уверен, как сделать форму для ее обновления. Я хочу, чтобы форма извлекала количество продукта в идентификаторе, доступном с помощью GetAmount. Пользователю предоставляется возможность добавлять, вычитать или обновлять значение, а затем он сохраняет его с помощью функции Update. Новая сумма также должна отображаться в поле количества. Кажется, это должно быть просто, но я недостаточно знаю о формах HTML, чтобы знать, как это сделать.

Вот скрипка с тем, что у меня до сих пор. http://jsfiddle.net/Arlen22/pCDx3/

Answer 1

Забудьте об использовании форм html для отправки ваших данных. Ваш источник данных подключен напрямую к вашему javascript, чтобы вы могли пропустить информацию об обратной передаче и кодовом коде. Я бы использовал jQuery для простоты, но вы могли бы сделать это с помощью собственного javascript. jQuery хорошо документирован, если вы решили изучить и использовать его, и стоит потратить время, чтобы узнать, если вы спросите меня.

Этот пример должен помочь вам начать работу, не стесняйтесь редактировать и комментировать его по мере необходимости:

Html

<fieldset class="stock-control"> 

    <legend>Edit Stock Amount</legend> 

    <label>ID:</label> 
    <input type="text" id="txt-id"> 

    <label>Amount:</label> 
    <input type="text" id="txt-change"><br /> 

    <input type="button" id="btn-add" value="Add"> 
    <input type="button" id="btn-sub" value="Subtract"> 
    <input type="button" id="btn-set" value="Set"> 

    <br /> 
    <label>In stock: </label><span id="lbl-total"></span> 

</fieldset> 

<fieldset class="stock-control"> 

    <legend>Edit Stock Amount</legend> 

    <label>ID:</label> 
    <input type="text" class="txt-id"> 

    <label>Amount:</label> 
    <input type="text" class="txt-change"><br /> 

    <input type="button" class="btn-add" value="Add"> 
    <input type="button" class="btn-sub" value="Subtract"> 
    <input type="button" class="btn-set" value="Set"> 

    <br /> 
    <label>In stock: </label><span class="lbl-total"></span> 

</fieldset> 

Javascript

// Your code 

$(function() { 

    $('.stock-control').each(function() { 

     var $control = $(this); 
     var $id = $control.find('.txt-id'); 
     var $amount = $control.find('.txt-amount'); 
     var $total = $control.find('.lbl-total'); 

     function RenderAmount() { 
      $total.text(StockRecorder.GetAmount($id.val())); 
     }; 

     $('.btn-add').click(function() { 
      var stock = parseInt($total.text()) + parseInt($amount.val()); 
      StockRecorder.Update($id.val(), stock); 
      RenderAmount(); 
     }); 

     $('.btn-sub').click(function() { 
      var stock = parseInt($total.text()) - parseInt($amount.val()); 
      StockRecorder.Update($id.val(), stock); 
      RenderAmount(); 
     }); 

     $('.btn-set').click(function() { 
      StockRecorder.Update($id.val(), parseInt($amount.val())); 
      RenderAmount(); 
     }); 

     // Initialize 
     RenderAmount(); 

    }); 

}); 

ПРИМЕЧАНИЕ : Вам нужна кнопка или ev который вызывает функции RenderAmount(), когда идентификатор был введен/изменен в текстовом поле id. В моем примере я притворился, что он уже был заполнен.

Кстати, это похоже на забавный проект, который вы получили. Наслаждайся этим! :)