Расчет по текстовым полям друг против друга с помощью js

Question

Я пытаюсь вычислить результаты на текстовых полях. У меня есть два текстовых поля, и когда кто-то вводит значение, как 3 or 4 на первом текстовом поле, он генерирует результат во втором текстовом поле. Я также пытаюсь, если кто-то попытается ввести значения на втором, тогда он покажет результат на первом. Он отлично работает для первого условия но не для второго. Мой код ниже. Мое второе текстовое поле не позволяет мне изменять значение.

<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

Это происходит потому, что вы определяете тот же класс на обоих полях ввода поэтому при вводе значения на втором входе обе функции работает, потому что второе поле ввода имеют одинаковый класс.

Добавить другой класс в первом поле, а затем использовать один и тот же класс в функции

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()", как может быть вы используете его в некотором роде, но это показывая ошибки консоли, проверьте об этом