jsを使用してテキストフィールドを相互に計算する

Question

テキストフィールドの結果を計算しようとしています。私は2つのテキストフィールドがあり、誰かが最初のテキストフィールドに3 or 4のような値を入力すると、2番目のtextfield.Iの結果を生成します。もし誰かが2番目の値を入力しようとすると、私のコードは以下の通りです。私の2番目のテキストフィールドは私に値を変更させません。

<script type="text/javascript"> 
jQuery(function(jQuery) { 
    jQuery('.product-custom-option').on('keyup', function() { 
     var total = jQuery('.product-custom-option').val(); 
     var perunit = 3;  
     var newprice = total/perunit; 
     jQuery('#no_packs').val(Math.ceil(newprice)); 

    }); 
}); 
jQuery(function(jQuery) { 
    jQuery('#no_packs').on('keyup', function() { 
     var total = jQuery('#no_packs').val(); 
     var perunit = 3;  
     var newprice = total * perunit; 
     jQuery('.product-custom-option').val(newprice); 
    }); 
}); 
</script> 

HTML：

<dl class="last">   
<dt> 
</dt><dt><label class="required"><em>*</em>Square meters required</label> 
    </dt> 
<dd class="last"> 
    <div class="input-box"> 
      <input type="text" onchange="opConfig.reloadPrice()" id="options_134_text" class="input-text required-entry product-custom-option" name="options[134]" value=""> 
      </div> 
</dd> 
     </dl> 
<div class=""> 
<label class="required">Number of Packs</label> 
<div class="input-box"> 
      <input type="text" id="no_packs" class="input-text product-custom-option" name="qty" value=""> 
      </div> 
</div> 

Answer 1

あなたは、両方の入力フィールドに同じクラスを定義しているので、これが起こっている2番目の入力に値を入力するときに、第2の入力フィールドが同じクラスを持っているので、その両方の機能が動作します。

最初のフィールドに別のクラスを追加して機能に

jQuery(function(jQuery) { 
 
     jQuery('.first').on('keyup', function() { 
 
     var total = jQuery('.product-custom-option').val(); 
 
     var perunit = 3; 
 
     var newprice = total/perunit; 
 
     jQuery('#no_packs').val(Math.ceil(newprice)); 
 

 
     }); 
 
    }); 
 
    jQuery(function(jQuery) { 
 
     jQuery('#no_packs').on('keyup', function() { 
 
     var total = jQuery('#no_packs').val(); 
 
     var perunit = 3; 
 
     var newprice = total * perunit; 
 
     jQuery('.first').val(newprice); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<dl class="last"> 
 
    <dt> 
 
</dt><dt><label class="required"><em>*</em>Square meters required</label> 
 
    </dt> 
 
    <dd class="last"> 
 
    <div class="input-box"> 
 
     <input type="text" onchange="opConfig.reloadPrice()" id="options_134_text" class="input-text required-entry product-custom-option first" name="options[134]" value=""> 
 
    </div> 
 
    </dd> 
 
</dl> 
 
<div class=""> 
 
    <label class="required">Number of Packs</label> 
 
    <div class="input-box"> 
 
    <input type="text" id="no_packs" class="input-text product-custom-option" name="qty" value=""> 
 
    </div> 
 
</div>

さて私はあなたには、いくつかの方法でそれを使用していることもようonchange="opConfig.reloadPrice()"を無視していますが、それはだが、同じクラスを使用しますコンソールエラーを表示しています