自動的に4番目の値を計算します

-1

EDIT2：入力検証を削除しましたので、値が破損することはありません。さらにonkeyupメソッドに関数を追加しました。しかし、たとえばWidht、GSM、Weightの3つの値を入力すると長さが計算されますが、すべての関数が長さと共にキーアップしているので、他の値も変わります。自動的に4番目の値を計算します

Lengthを計算するときに他の値が変更されないようにするにはどうすればよいですか？

EDIT：長さの値は、幅及びGSMが提供される場合などについては、次に重の値が割り当てられることになる{式：長さ*幅* GSM/3100}幅に対して

場合、値、 GSMと重量が与えられている場合、長さは{式（重量* 3100）/幅* GSM}

などと計算されます。

私は4つの入力ボックスを持っています。ユーザーが3つのボックスのいずれかを入れたときに、4番目の値が4番目のボックスに自動的に生成される必要があります。

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

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) 
 
    // { 
 
    // \t 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'; 
 
    } 
 
}

<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">

我々は4番目の値

新しいHTMLを取得する必要がありますここで、固定ボックスがあるときは今の私のコードは動作します

私は別のonkeyupで機能しますが、コードを破壊します。 [値が変更され続けているため]

助けていただければ幸いです！

出典

2017-06-21 Ayush Mandowara

「私は別の機能をonkeyに入れていますが、コードが壊れています。」これはどういう意味ですか？エラーが出ますか？もしそうなら、どのようなエラー？ –

'on'タグの中で' onkeyup'の代わりに 'oninput'イベントリスナを使うべきです。これは、値がマウスクリックまたは他の方法で変更された場合の関数呼び出しも提供します。また、実際に直面している問題は何ですか？ –

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

        }) 
       }) 

       } 
      }  
     }

出典

2017-06-21 06:45:08

作業していない場合は、私に知らせてください –

問題の内容と行った変更を教えてください。 –

最初に、3つの値がすべてnullでないことを確認します。次に、eventListnerをGSMに追加してから、4番目の入力で値を変更します。私はちょうどコード最後の 'else'条件を変更します –

自動的に4番目の値を計算します

答えて

関連する問題