javascript - 如果是计算形式，则计算立方米=高*平方米或立方米=长*宽*高

Question

在我的表单中，我让用户输入房间的长度高度和宽度以获得 m2、m3 和瓦特的计算值。但是用户也应该能够直接输入 height 和 m2 来获取值。我尝试了很多语法，但 if else 不能正常工作。 我知道我必须以某种方式清空变量，我通过表单重置功能尝试过。

$(document).ready(function() {
  // https://allaboutbasic.com/2017/08/25/how-to-add-auto-calculation-fields-or-calculator-in-contact-form-7-using-jquery/;

  var le; // länge
  var wi; // breite
  var he; // höhe
  var m2; // quadrat Meter
  var m3; // Kubik Meter
  var wt1 = 40; // Watt per Kubik

  if (!document.getElementById("le").value || !document.getElementById("wi").value) {

    $("#le").on("change", function() {
      le = parseInt(this.value, 10);
      $("#wi").on("change", function() {
        wi = parseInt(this.value, 10);
        $("#he").on("change", function() {
          he = parseInt(this.value, 10);
          m2 = le * wi;
          m3 = le * wi * he;
          wt = m3 * wt1 / 1000;
          // runden ohne dezimalstellen "(toFixed(2)) zwei Stellen"
          $("#m2").val(m2.toFixed());
          $("#m3").val(m3.toFixed());
          $("#wt").val(wt.toFixed(3));
        });
      });
    });
  } else {
    $("#he").on("change", function() {
      he = parseInt(this.value, 10);
      $("#m2").on("change", function() {
        m2 = parseInt(this.value, 10);
        m3 = m2 * he;
        wt = m3 * wt1 / 1000;
        $("#m2").val(m2.toFixed());
        $("#m3").val(m3.toFixed());
        $("#wt").val(wt.toFixed(3));
      });
    });
  }
});

function resetcalcform() {
  document.getElementById("calcForm").reset();
  le = undefined; // unset länge
  wi = undefined; // unset breite
  he = undefined; // unset höhe
  m2 = undefined; // unset quadrat Meter
  m3 = undefined; // unset Kubik Meter
};

label {
  display: block;
}

input {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="kaecalc ">
  <form id="calcForm" name="data_entry" action="#" autocomplete="off">
    <div>
      <label class="" for="le">Länge in m</label>
      <input type="text" class="2" id="le">
      <!-- "text" type um "," als dezimal eingabe zu erlauben -->
    </div>
    <div>
      <label class="" for="wi">Breite in m</label>
      <input type="text" id="wi">
    </div>
    <div>
      <label class="" for="he">Höhe in m </label>
      <input type="text" id="he">
    </div>
    <div>
      <label class="" for="m2">m2 </label>
      <input type="number" id="m2">
    </div>
    <div>
      <label class="" for="m3">m3 </label>
      <input type="number" id="m3">
    </div>
    <div>
      <label class="" for="watt">KW der Anlage</label>
      <input type="number" id="wt">
    </div>
  </form>
  <!-- button MTS Styles -->
  <p align="right"><span class="">
    <button id="tdmyb1" class="" role="button" onclick="resetcalcform()"><span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text">reset</span></button>

Answer 1

  var le; // länge
  var wi; // breite
  var he; // höhe
  var m2; // quadrat Meter
  var m3; // Kubik Meter
  var wt1 = 40; // Watt per Kubik
var wt;
var props ={};
$(document).ready(function() {
  // https://allaboutbasic.com/2017/08/25/how-to-add-auto-calculation-fields-or-calculator-in-contact-form-7-using-jquery/;



 

    $("#le,#wi,#he,#m2").on("change", function() {
  m2=m3=wt=undefined;

      props[this.id] = parseInt(this.value, 10);
        
        if(props.le && props.wi && props.he){    
 m2 = props.le * props.wi;        
          m3 = props.le * props.wi * props.he;
          wt = m3 * wt1 / 1000;

}else if(props.m2 && props.he){
m2 = props.m2;
   m3 = props.m2 * props.he;
          wt = m3 * wt1 / 1000;
}else if(props.le && props.wi){
          m2 = props.le * props.wi;
 
}
          // runden ohne dezimalstellen "(toFixed(2)) zwei Stellen"
         $("#m2").val(m2 && m2.toFixed());
          $("#m3").val(m3 && m3.toFixed());
          $("#wt").val(wt && wt.toFixed(3));
      
    });
 
});

function resetcalcform() {
  document.getElementById("calcForm").reset();
  le = undefined; // unset länge
  wi = undefined; // unset breite
  he = undefined; // unset höhe
  m2 = undefined; // unset quadrat Meter
  m3 = undefined; // unset Kubik Meter
wt = undefined;
props ={};

};

label {
  display: block;
}

input {}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="kaecalc ">
  <form id="calcForm" name="data_entry" action="#" autocomplete="off">
    <div>
      <label class="" for="le">Länge in m</label>
      <input type="text" class="2" id="le">
      <!-- "text" type um "," als dezimal eingabe zu erlauben -->
    </div>
    <div>
      <label class="" for="wi">Breite in m</label>
      <input type="text" id="wi">
    </div>
    <div>
      <label class="" for="he">Höhe in m </label>
      <input type="text" id="he">
    </div>
    <div>
      <label class="" for="m2">m2 </label>
      <input type="number" id="m2">
    </div>
    <div>
      <label class="" for="m3">m3 </label>
      <input type="number" id="m3">
    </div>
    <div>
      <label class="" for="watt">KW der Anlage</label>
      <input type="number" id="wt">
    </div>
  </form>
  <!-- button MTS Styles -->
  <p align="right"><span class="">
    <button id="tdmyb1" class="" role="button" onclick="resetcalcform()"><span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text">reset</span></button>