how to write javascript calculated array

Question

1. Why the 2 array can't press + or -
2. So i wanna get this price & quantity will sum and get value in amount

3. when you also and price and the system will be get the value out in amount the total in below will be change ( it extract from amount )

   <table class="table table-striped table-hover">
       <thead>
           <tr>
               <th class="span1" style="text-align:center;">Delete</th>
               <th class="span12" style="text-align:center;">Name</th>
               <th class="span2" style="text-align:center;">Price</th>
               <th class="span2" style="text-align:center;">Quantity</th>
               <th class="span2" style="text-align:center;">Amount</th>
           </tr>
       </thead>
       <tbody>
           <tr>
               <td style="text-align:center; vertical-align:middle;">
                   <a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
               </td>
               <td style="text-align:left; vertical-align:middle;">test</td>
               <td style="text-align:center; vertical-align:middle;">24</td>
               <td style="text-align:center; vertical-align:middle;">
                   <div class="input-append">
                       <input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
                       <button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
                       <button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
                   </div>
               </td>+63
               <td style="text-align:right; vertical-align:middle;"></td>
           </tr>
           <tr>
               <td style="text-align:center; vertical-align:middle;">
                   <a class="btn-danger" href=""><i class="icon-remove icon-white"></i></a>
               </td>
               <td style="text-align:left; vertical-align:middle;">test</td>
               <td style="text-align:center; vertical-align:middle;">24</td>
               <td style="text-align:center; vertical-align:middle;">
                   <div class="input-append">
                       <input class="input-mini" type="text" id="quantity[]" name='prd_num[]' value='1' style="text-align:center;">
                       <button class="btn" type="button" id="up"><i class="icon-plus"></i></button>
                       <button class="btn" type="button" id="down"><i class="icon-minus"></i></button>
                   </div>
               </td>+63
               <td style="text-align:right; vertical-align:middle;"></td>
           </tr>                               
       </tbody>
       <tfoot>
           <tr>
               <td colspan="3"></td>
               <td style="text-align:center; vertical-align:middle;">
                   <strong>Total</strong>
               </td>
               <td style="text-align:right; vertical-align:middle;"></td>
           </tr>
       </tfoot>
   </table>
   

The JavaScript is as follows:

    button_up=document.getElementById('up');
    button_down=document.getElementById('down');

    button_up.onclick=function() {setQuantity('up');}
    button_down.onclick=function() {setQuantity('down');}

    quantity = document.getElementById('quantity[]');

    function setQuantity(upordown) {
    if (quantity.value > 1) {
            if (upordown == 'up') {++quantity.value;}
    else if (upordown == 'down') {--quantity.value;}
        }
        else if (quantity.value == 1) {
            if (upordown == 'up') {++quantity.value;}
        }
        else
            {quantity.value=1;}
    }

http://jsfiddle.net/Danglebz/ucdpx/

Answer 1

a lot of small fixes same id for different objects are not good and the js code have to be more portable, so if you have 1000 lines it'll work the best way would be to use event delegation but there's a version

function setQuantity(e) {
            var upordown = $(e.target).hasClass("up") ? "up" : "down"
                , objQt = $(e.target).closest("div").find("input");

            if (parseInt(objQt.val(), 10) > 1) {
                if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}
                else if (upordown == 'down'){objQt.val(parseInt(objQt.val(),10)-1);}}
            else if (objQt.val() == 1) {
                if (upordown == 'up'){objQt.val(parseInt(objQt.val(),10)+1);}}
            else
                {objQt.val(1);}
        }

$(".btn").click(setQuantity);

http://jsfiddle.net/ucdpx/2/