Javascript 自动计算第四个值_Javascript_Jquery_Html_Input

Javascript 自动计算第四个值

javascript jquery html input

Javascript 自动计算第四个值,javascript,jquery,html,input,Javascript,Jquery,Html,Input,EDIT2：我删除了输入验证，所以现在值不会损坏。向onkeyup方法添加了更多函数。但是，如果为eg输入三个值，即Widht、GSM和Weight，则将计算长度，但由于所有函数都在向上键中，因此其他值也会随着长度而变化如何使计算长度时，其他值不会改变编辑：例如，如果提供了长度、宽度和GSM的值，则将分配重量值{公式：长度*宽度*GSM/3100} 如果给出了宽度、GSM和重量的值，则应计算长度{公式：（重量*3100）/宽度*GSM} 等等我有四个输入框，我想要的是当用户输入三个框中

EDIT2：我删除了输入验证，所以现在值不会损坏。向onkeyup方法添加了更多函数。但是，如果为eg输入三个值，即Widht、GSM和Weight，则将计算长度，但由于所有函数都在向上键中，因此其他值也会随着长度而变化

如何使计算长度时，其他值不会改变

编辑：例如，如果提供了长度、宽度和GSM的值，则将分配重量值{公式：长度*宽度*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>

函数CalculateWeightInches（）{
var Length=document.getElementById（“txt_权重”）.value；
var width=document.getElementById（“txt_width”）.value；
var GSM=document.getElementById（“txt_GSM”）.值；
var计算=（长度*宽度*GSM）/3100；
var result=document.getElementById（“txt_结果”）；
//如果（长度<0）
// {
//document.getElementById（'err'）。innerHTML='error Length！'；
// }
error=document.getElementById（'err_1'）；
如果（计算<0 | |宽度>300 | |宽度<1 | | GSM<5 | | GSM>800 | |长度<1 | |长度>99）{
result.value=0；
error.style.display='block'；
}否则{
result.value=计算到固定值（2）；
error.style.display='none'；
}
}


1.以英寸和克重量为单位，计算含有500张给定尺寸纸张的铰刀的重量（千克）。


长度：英寸


宽度：英寸


GSM:


重量：公斤




有效范围：
L=1至99英寸
W=1至99英寸
GSM=5至800

公式：（长度*宽度*GSM）/3100

函数计算权重（）{
var Length=document.getElementById（“txt_权重”）.value；
var width=document.getElementById（“txt_width”）.value；
var GSM=document.getElementById（“txt_GSM”）.值；
var计算=（长度*宽度*GSM）/3100；
var result=document.getElementById（“txt_结果”）；
//如果（长度<0）
// {
//document.getElementById（'err'）。innerHTML='error Length！'；
// }
error=document.getElementById（'err_1'）；
如果（计算<0 | |宽度>300 | |宽度<1 | | GSM<5 | | GSM>800 | |长度<1 | |长度>99）
{
result.value=0；
error.style.display='block'；
}
其他的
{
if（长度和宽度和GSM）{
var GSMElement=document.getElementById（“txt_GSM”）；
var lengthElement=document.getElementById（“txt_-weight”）；
var widthElement=document.getElementById（“txt_宽度”）；
var elementsArray=[GSMElement，widthElement，lengthElement]
elementsArray.forEach（函数（ele）{
ele.addEventListener（'change'，function（）{
result.value=计算到固定值（2）；
error.style.display='none'；
})
})
}
}       
}

我试图在onkey中加入另一个函数，但它破坏了代码。

这是什么意思？你有错误吗？如果是，什么错误？您应该在

HTML

标记中使用

oninput

事件侦听器，而不是

onkeyup

。如果通过鼠标单击或任何其他方式更改值，这也将为您提供函数调用。另外，请详细说明您面临的实际问题是什么？请解释问题所在以及您所做的更改。首先，我确认所有三个值均不为空，然后将

eventListner

添加到GSM（第三个输入），然后更改第四个输入中的值。我只是上一次更改代码，否则不知道它是否正常工作。但是，每当你发布一些东西时，试着包括哪些不起作用，你是如何修复的，等等，以便知识得以转移。：）

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);
  }
};

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';   

                    })
                })

               }
           }       
       }