javascript - 无法使用 javascript 根据输入计算面积

Question

Expected Calculator Actual Calculator 我想制作计算器，使用javascript转换尼泊尔的面积计算单位，即将Ropani、Anna、Paisa、Dam转换为平方英尺和平方米，并将Bigha、Katha、Dhur转换为平方英尺和平方米。用户可以将 Ropani 系统转换为平方英尺和平方米，也可以将 Bigha 系统转换为平方英尺和平方米。因此，我想使用相同的输入字段来计算平方英尺和平方米的总和。

它适用于将 Ropani、Anna、Paisa、Dam 系统转换为平方英尺和平方米，但不适用于将 bigha 系统转换为平方英尺和平方米。

请帮助我。

HTML 表单

 <input type="text" class="form-control ropani"  name="landinfo_ropani" />
 <input type="text" class="form-control aana"  name="landinfo_aana" />                                          
 <input type="text" name="landinfo_paisa" class=" form-control paisa"  />                                              
 <input  type="text" class="form-control dam" name="landinfo_daam"  />                                                  
 <input name="landinfo_bigha"  class="form-control  bigha" placeholder="Bigha" type="text"  value="" id="bigha"/>                                                  
 <input name="landinfo_katha "  class="form-control katha" data-val="true"   type="text" value="" id="katha"/>                                              
 <input name="landinfo_dhur"  class="form-control dhur" data-val="true" placeholder="dhur"  type="text" value="dhur"/>                                       
 <input type="text" class="form-control total total2" name="landinfo_sqfeet" placeholder="Sq.feet" />                                           
 <input type="text" class="form-control total1 total3" name="landinfo_sqmeter" placeholder="Sq.feet" /> 

Javascript

   var obj = {};
$('input:not(.total)').on('keyup', function(event) {
  var area = 0;
  var area1 = 0;
  if (parseFloat(event.target.value) == NaN) return;
  obj[event.target.classList[0]] = event.target.value;
  obj.ropani = obj.ropani ? obj.ropani : $(".ropani").val();
  obj.aana = obj.aana ? obj.aana : $(".aana").val();
  obj.paisa = obj.paisa ? obj.paisa : $(".paisa").val();
  obj.daam = obj.daam ? obj.daam : $(".dam").val();
  area += obj.ropani * 5476.0000 + obj.aana * 342.2500 + obj.paisa * 85.5625 + obj.daam * 21.390625;
  area1 += obj.ropani * 508.73704704 + obj.aana * 31.79606544 + obj.paisa * 7.94901636 + obj.daam * 1.98725409;

  $(".total1").val(parseFloat(area1));
  $(".total").val(parseFloat(area));

});
  var obj1 = {};
$('input:not(.total2)').on('keyup', function(event) {
  var area2 = 0;
  var area3 = 0;
var data=$("#bigha").val();
// console.log(data);debugger;
  if (parseFloat(event.target.value) == NaN) return;
  obj1[event.target.classList[0]] = event.target.value;
  obj1.bigha = obj1.bigha ? obj1.bigha : $("#bigha").val();
  obj1.katha = obj1.katha ? obj1.katha : $("#katha").val();
  obj1.dhur = obj1.dhur ? obj1.dhur : $("#dhur").val();

  area2 += obj1.bigha * 72,900 + obj1.katha * 3,645 + obj1.dhur * 182.25 ;
  area3 += obj1.bigha * 6772.41 + obj1.katha * 338.62 + obj1.dhur * 16.93;
// console.log(area2);debugger;
  $(".total3").val(parseFloat(area2));
  $(".total2").val(parseFloat(area3));

});

Answer 1

据我了解，有两个系统，因此我将输入分为rop_sys和bhig_sys。每个都有自己的监听器，每个对象都从 classList 中获取第一个类。 classList 中的顺序很重要，因此我将它们放在开头(我建议使用 $().data() 方法)。我引用了this question 。考虑以下因素:

var obj = {};
$('input.rop_sys:not(.total)').on('keyup', function(event) {
  var area = 0;
  var area1 = 0;
  if (parseFloat(event.target.value) == NaN) return;
  obj[event.target.classList[0]] = event.target.value;
  obj.ropani = obj.ropani ? obj.ropani : $(".ropani").val();
  obj.aana = obj.aana ? obj.aana : $(".aana").val();
  obj.paisa = obj.paisa ? obj.paisa : $(".paisa").val();
  obj.daam = obj.daam ? obj.daam : $(".dam").val();
  area += obj.ropani * 5476.0000 + obj.aana * 342.2500 + obj.paisa * 85.5625 + obj.daam * 21.390625;
  area1 += obj.ropani * 508.73704704 + obj.aana * 31.79606544 + obj.paisa * 7.94901636 + obj.daam * 1.98725409;

  $(".total1").val(parseFloat(area1));
  $(".total").val(parseFloat(area));
});


var obj1 = {};
$('input.bhig_sys:not(.total2)').on('keyup', function(event) {
  var area2 = 0;
  var area3 = 0;
  var data = $("#bigha").val();
  if (parseFloat(event.target.value) == NaN) return;
  obj1[event.target.classList[0]] = event.target.value;
  obj1.bigha = obj1.bigha ? obj1.bigha : $("#bigha").val();
  obj1.katha = obj1.katha ? obj1.katha : $("#katha").val();
  obj1.dhur = obj1.dhur ? obj1.dhur : $("#dhur").val();

  area2 += obj1.bigha * 72.900 + obj1.katha * 3, 645 + obj1.dhur * 182.25;
  area3 += obj1.bigha * 6772.41 + obj1.katha * 338.62 + obj1.dhur * 16.93;
  // console.log(area2);debugger;
  $(".total3").val(parseFloat(area2));
  $(".total2").val(parseFloat(area3));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="ropani form-control rop_sys" name="landinfo_ropani" placeholder="ropani" />
<input type="text" class="aana form-control rop_sys" name="landinfo_aana" placeholder="aana" />
<input type="text" name="landinfo_paisa" class="paisa form-control rop_sys" placeholder="paisa" />
<input type="text" class="dam form-control rop_sys" name="landinfo_daam" placeholder="daam" />
<input name="landinfo_bigha" class="bigha form-control bhig_sys" placeholder="Bigha" type="text" id="bigha" />
<input name="landinfo_katha " class="katha form-control bhig_sys" data-val="true" placeholder="katha" type="text" id="katha" />
<input name="landinfo_dhur" class="dhur form-control bhig_sys" data-val="true" placeholder="dhur" type="text" id="dhur" />
<br />
<br />
<input type="text" class="form-control total total2 rop_sys" name="landinfo_sqfeet" placeholder="Sq.feet" />
<input type="text" class="form-control total1 total3 bhig_sys" name="landinfo_sqmeter" placeholder="Sq.meter" />