jst gt関数と競合する小計関数

Question

今日、O.kは1ステップ前進と2ステップバックになり始めています。私は、フォーム内の価格x qty =小計を行うJquery関数を持っています。そして、各小計は合計として計算されます。これはすべて罰金です。私はその後、その合計値を取ってgstを追加し、次にそれ自身の上に作成されたさらなる小計の図形を作成し、この時点で私がgst上でそれを移動しようとしたときに、仕事と私はそれからいずれかのエラーコードを取得することはできません。この時点では、私はjsスクリプトがJqueryスクリプトと対話できないか、何かが本当に間違っていると仮定することができます。

私は今、私はまた、HTMLからのonChange（）を除去することにより、コードを更新し、トリガーを追加した、あなたのコードを編集し、そして

var exPrice = document.getElementById("Total").value; 

に

var exPrice = document.getElementById("ex-gst").value; 

この行を変更した

// Jquery script 
<script type="text/javascript"> 
    jQuery(function($) { 
    $(".qty, .tradeprice").change(function() { 
     var total = 0; 
     $(".qty").each(function() { 
      var $qty = $(this), 
       $row = $qty.closest('tr'), 
       $tradePrice = $row.find('.tradeprice'), 
       $subtotal = $row.find('.subtotal'); 
      subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val()); 
      total += subtotal; 
      $subtotal.val(subtotal); 
     }); 
     $('.total').val(total); 
    }).change(); 
    }); 
</script> 


// JS script 
<script type="text/javascript"> 
    function updatePrice() { 
      // Get the ex-GST price from its form element 
    var exPrice = document.getElementById("ex-gst").value; 
    var gstPrice = document.getElementById("gst").value; 

    // Get the GST price 
    gstPrice = exPrice * 0.1; 
    var TPrice = parseInt(gstPrice) + parseInt(exPrice); 

    // Set the GST price in its form element 
    document.getElementById("gst").value = gstPrice; 
    document.getElementById("inc-gst").value = TPrice; 

    } 
</script> 

// bottom of HTML 
<form> 
    <table> 
     <tr> 
      <th><input type='text' name='po101' id='po101'/></th> 
      <td><input name='po102' type='text' id="po102"/></td> 
      <td><input name='po103' type='text' id="po103" /></td> 
      <td>$<input name='po104' type="text" class='tradeprice' id="po104" value="0" /></td> 
      <th><input name='po105' type="text" class='qty' id="po105" value="0" /></th> 
      <td><input name='po106' type='text' class='subtotal' id="po106" readonly="true" /></td> 
     </tr> 
     <tr> 
      <th height='24' colspan="7">Total:<input type='text' id='Total' name='Total' class='total' readonly="true" onChange="updatePrice()"/></th> 
     </tr> 
     <tr> 
      <th height='24' colspan="7"><div id='submit'><input type='submit' /></div></th> 
     </tr> 
     <tr> 
      <th height='24' colspan="7"> 
      <input type='text' id="gst" name='gst' onChange="updatePrice()" /> 
      <input type='text' id="inc-gst" name='inc-gst' onChange="updatePrice(this.form)"/> 
      </th> 
     </tr> 
    </table> 
</form> 

Answer 1

あなたのupdatePrice（）関数をchangeイベントに追加します。

これが結果です（私もjQueryバージョンをコメントとして追加しました。両方とも動作します）。

jQuery(function($) { 
 
     $(".qty, .tradeprice").change(function() { 
 
     var total = 0; 
 
     $(".qty").each(function() { 
 
      var $qty = $(this), 
 
      $row = $qty.closest('tr'), 
 
      $tradePrice = $row.find('.tradeprice'), 
 
      $subtotal = $row.find('.subtotal'); 
 
      subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val()); 
 
      total += subtotal; 
 
      $subtotal.val(subtotal); 
 
     }); 
 
     $('.total').val(total); 
 
     updatePrice(); 
 
     }).change(); 
 
    }); 
 

 
    function updatePrice() { 
 
     // Get the ex-GST price from its form element 
 
     var exPrice = document.getElementById("Total").value; 
 
     //var exPrice = $('#Total').val() //this is jQuery 
 
     var gstPrice = document.getElementById("gst").value; 
 
     //var exPrice = $('#gst').val() //this is jQuery 
 

 
     // Get the GST price 
 
     gstPrice = exPrice * 0.1; 
 
     var TPrice = parseInt(gstPrice) + parseInt(exPrice); 
 

 
     // Set the GST price in its form element 
 
     document.getElementById("gst").value = gstPrice; 
 
     //$('#gst').val(gstPrice) //this is jQuery 
 
     document.getElementById("inc-gst").value = TPrice; 
 
     //$('#inc-gst').val(TPrice) //this is jQuery 
 

 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<form> 
 
    <table> 
 
    <tr> 
 
     <th> 
 
     <input type='text' name='po101' id='po101' /> 
 
     </th> 
 
     <td> 
 
     <input name='po102' type='text' id="po102" /> 
 
     </td> 
 
     <td> 
 
     <input name='po103' type='text' id="po103" /> 
 
     </td> 
 
     <td>$ 
 
     <input name='po104' type="text" class='tradeprice' id="po104" value="0" /> 
 
     </td> 
 
     <th> 
 
     <input name='po105' type="text" class='qty' id="po105" value="0" /> 
 
     </th> 
 
     <td> 
 
     <input name='po106' type='text' class='subtotal' id="po106" readonly="true" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <th height='24' colspan="7">Total: 
 
     <input type='text' id='Total' name='Total' class='total' readonly="true" /> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <th height='24' colspan="7"> 
 
     <div id='submit'> 
 
      <input type='submit' /> 
 
     </div> 
 
     </th> 
 
    </tr> 
 
    <tr> 
 
     <th height='24' colspan="7"> 
 
     <input type='text' id="gst" name='gst' /> 
 
     <input type='text' id="inc-gst" name='inc-gst' /> 
 
     </th> 
 
    </tr> 
 
    </table> 
 
</form>