Question

EDIT2：我删除了输入验证，因此现在值不会被破坏。为onkeyup方法添加了更多功能。但是，例如，如果我输入三个值，对于Widht，GSM和Weight，将计算长度，但由于所有函数都在键上，随着长度，其他值也会发生变化。

我如何做到这一点，以便在计算长度时，其他值不会改变？

编辑：例如，如果提供长度，宽度和GSM的值，则将指定权重值{formula：Length * Width * GSM / 3100}

如果给出宽度，GSM和重量的值，则应计算长度{公式:(重量* 3100）/宽度* GSM}

等等。

我有四个输入框，我想要的是当用户放入三个框中的任何一个时，第四个值应该在第四个框中自动生成。现在我的代码工作时有一个固定的盒子，我们必须得到第四个值

新HTML：

    <!DOCTYPE html>
<html>
<head>
    <title>Paper Calc 2</title>
    <script type="text/javascript" src = "js/test.js"></script>
    <link rel="stylesheet" type="text/css" href="css/CALC.css">
    <meta charset="utf-8">
</head>
<body>


  <div class="container-fluid">

    <div id = "case_one"  class="calcoptions sizemod">

    <h5>1. To find the weight (in <b>Kilograms</b>) of a ream containing 500 sheets of a given size in <b>inches</b> and <b>Gram-Weight.</b></h5> 
    <br>    

    <div class="row">
    <div class="col-md-6">


    Length: <input type="number" step="0.01" name="length_in" id="length" placeholder="Length(inch)"  onkeyup="fun(); fun2(); fun3();">inch
    <br><br>

    Width: &nbsp;&nbsp;<input type="number" step="0.01" name="width_in" id="width" placeholder="Width(inch)"  onkeyup="fun(); fun2(); fun4();">inch
    <br><br>

    GSM: &nbsp;&nbsp;&nbsp;<span class="extraSpace">&nbsp;</span><input type="number"    step="0.01" name="length_in" id="GSM" placeholder="GSM" onkeyup="fun(); fun3(); fun4();"> <!-- <button type = "button" name = "calc2" class = 'btnclass' id="cal2" onclick="func2()"> calc2-->
    </button>
    <br><br>

    Weight: <input type="number" step = "0.01" name="Weight_Kg" id = "weight" onkeyup="fun2(); fun3(); fun4();"> <!-- KG <button type = "button" name = "calc1" id="cal1" class = 'btnclass' onclick="func1()">
        calc1 -->
    </button> 
    <br><br> 






    </div>
 <p id='err'></p>

</body>
</html>

新JS：

function fun()
{
  var l = document.getElementById('length').value;
  var w = document.getElementById('width').value;
  var g = document.getElementById('GSM').value;

  if (l && w && g)
  {
    var wt = document.getElementById('weight');
    var calculate = (eval(l)*eval(w)*eval(g))/3100;
    wt.value = calculate.toFixed(2);
  }
};

function fun2()
{
  var l = document.getElementById('length').value;
  var w = document.getElementById('width').value;
  var wt = document.getElementById('weight').value;

  if (l && w && wt)
  {
    var g = document.getElementById('GSM');
    var calculate = (eval(wt)*3100)/(eval(l)*eval(w));
    g.value = calculate.toFixed(2);
  }
};

function fun3()
{
  var l = document.getElementById('length').value;
  var wt = document.getElementById('weight').value;
  var g = document.getElementById('GSM').value;

  if (l && g && wt)
  {
    var w = document.getElementById('width');
    var calculate = (eval(wt)*3100)/(eval(l)*eval(g));
    w.value = calculate.toFixed(2);
  }
};

function fun4()
{
  var w = document.getElementById('width').value;
  var wt = document.getElementById('weight').value;
  var g = document.getElementById('GSM').value;

  if (w && g && wt)
  {
    var l = document.getElementById('length');
    var calculate = (eval(wt)*3100)/(eval(w)*eval(g));
    l.value = calculate.toFixed(2);
  }
};

＆＃13;

function calculateWeightInInches() {
  var Length = document.getElementById("txt_weight").value;
  var width = document.getElementById("txt_width").value;
  var GSM = document.getElementById("txt_GSM").value;
  var calculate = (Length * width * GSM) / 3100;
  var result = document.getElementById("txt_Result");

  // if (Length < 0)
  // {
  // 	document.getElementById('err').innerHTML = 'Incorrect Length!';
  // }

  error = document.getElementById('err_1');

  if (calculate < 0 || width > 300 || width < 1 || GSM < 5 || GSM > 800 || Length < 1 || Length > 99) {
    result.value = 0;
    error.style.display = 'block';
  } else {
    result.value = calculate.toFixed(2);
    error.style.display = 'none';
  }
}

＆＃13;

<div class="container-fluid">

  <div id="case_one" class="calcoptions sizemod">

    <h5>1. To find the weight (in <b>Kilograms</b>) of a ream containing 500 sheets of a given size in <b>inches</b> and <b>Gram-Weight.</b></h5>
    <br>

    <div class="row">
      <div class="col-md-6">


        Length: <input type="number" step="0.01" name="length_in" id="txt_weight" placeholder="Length(inch)" min="1" max="99" onkeyup="calculateWeightInInches();">inch
        <br><br> Width: &nbsp;&nbsp;<input type="number" step="0.01" name="width_in" id="txt_width" placeholder="Width(inch)" min="1" max='300' onkeyup="calculateWeightInInches();">inch
        <br><br> GSM: &nbsp;&nbsp;&nbsp;<span class="extraSpace">&nbsp;</span><input type="number" min="5" max="800" step="0.01" name="length_in" id="txt_GSM" placeholder="GSM" onkeyup="calculateWeightInInches();">
        <br><br> Weight: <input type="number" step="0.01" name="Weight_Kg" id="txt_Result" readonly="readonly">KG
        <br><br>


      </div>
      <div class="col-md-6">
        <p id="err_1" style="display: none;">

          Valid Range: <br> L = 1 to 99 inch <br> W = 1 to 99 inch <br> GSM = 5 to 800 <br><br> Formula: (Length * width * GSM) / 3100

        </p>
      </div>
    </div>
  </div>

  <div id="case_two" class="calcoptions sizemod">

＆＃13;

我正在尝试将另一个函数放在onkeyup中，但它会破坏代码。 [因为价值不断变化]

任何帮助将不胜感激！

Answer 1

function calculateWeightInInches() {
           var Length = document.getElementById("txt_weight").value;
           var width = document.getElementById("txt_width").value;
           var GSM = document.getElementById("txt_GSM").value;
           var calculate = (Length * width * GSM) / 3100;
           var result = document.getElementById("txt_Result");

           // if (Length < 0)
           // {
           //   document.getElementById('err').innerHTML = 'Incorrect Length!';
           // }

           error = document.getElementById('err_1');

           if(calculate < 0 || width > 300 || width < 1 || GSM < 5 || GSM > 800 || Length < 1 || Length > 99)
           {
            result.value = 0;
            error.style.display = 'block'; 
           }

           else
           {
               if(Length && width && GSM) {
                var GSMElement = document.getElementById("txt_GSM");
                var lengthElement = document.getElementById("txt_weight");
                var widthElement = document.getElementById("txt_width");
                var elementsArray = [GSMElement,widthElement,lengthElement]
                elementsArray.forEach(function(ele){
                    ele.addEventListener('change', function() {
                        result.value = calculate.toFixed(2);
                        error.style.display = 'none';   

                    })
                })

               }
           }       
       }

自动计算第四个值

1 个答案: