2016-05-12 8 views
0

ユーザーがタンパク質フィールドからクリックしたり、タブで離れたりすると、値を取得してタンパク質から値を取得しようとしています。私はこのサイトでいくつかの例を調べましたが、自分のコードで作業することができませんでした。私はそれが本当にシンプルなものだと確信しています、私はそれを行う方法がわかりません。別のフィールドにコピーするフィールドを取得できません

<!DOCTYPE html> 
<html> 
<head> 

<meta http-equiv="content-type" content="text/html; charset=windows- 
1252"> 
<title>Dr. Kosimides Lean Body Academy Calculator</title> 
<style> 

body 
{ 
    background:#adff00; 
} 

main 
{ 
    border:2px solid #504E4F; 
    padding:5px 5px; 
    background:#1BA1E2; 
    width:225px; 
    border-radius:10px; 
    text-align: center; 
    margin-right:auto; 
    margin-left:auto; 
} 


h1 
{ 
    color:#9F9D9E 
    text-align:center; 
    font-size: 24px; 
} 

</style> 

<form name="lbac" id="lbac"> 
<main> 
    <form> 
    <h1>LBA Calculator</h1> 
    <div align="center"><label> Weight <input name="weight" 
      id="weight" size="5" type="text" autofocus> (lbs) </label> 
    <label><p></p> 
     Body Fat <input name="bodyfat" id="bodyfat" size="3" 
      type="text"> (%) </label></div> 
    <div align="right"> 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br> 
    </div>Recommended Amounts 
    <div align="right"><label> Protein <input name="protein" 
      id="protein" size="3" type="text"> </label><br> 
    </div> 
    <div align="right"><label> Water <input name="water" id="water" 
      size="3" type="text"> </label>&nbsp; <br> 
    </div> 
    &nbsp; <br> 
    <br> 
    <div align="left"><label> Pounds of Body Fat <input name="lbf" 
      id="lbf" size="3" type="text"> (lbs) </label><br> 
    </div> 
    <div align="left"><label> Lean Body Mass <input name="lbm" 
      id="lbm" size="3" type="text"> (lbs) </label><br> 
    </div> 
    <div align="left"><label> Daily Water Intake <input name="dwi" 
      id="dwi" size="3" type="text"> (oz) </label><br> 
    </div> 
    <div align="left"><label> Daily Protein Intake <input 
      name="dpi" id="dpi" size="3" type="text"> (g) </label><br> 
    </div> 
    <input name="Calculate" value="Calculate" onclick="LBAcalc()" 
    type="button"> 
     <input name="Reset" value="Reset" type="reset"> 
    </form> 
    </main> 


    <script> 

document.lbac.water.value=".5"; 
document.lbac.protein.value=".5" 
     function LBAcalc() 
     { 


       // Get The Input 

       var w_txt = document.getElementById('weight'); 
       var bf_txt = document.getElementById('bodyfat'); 
       var p_txt = document.getElementById('protein'); 
       var wtr_txt = document.getElementById('water'); 


       // Convert To Numbers If Needed 

       var w = parseInt(w_txt.value); 
       var bf = parseInt(bf_txt.value); 
       var p = parseFloat(p_txt.value); 
       var wtr = parseFloat(wtr_txt.value); 


       // Convert body fat to percentage 

       bf = bf/100 

       // Process and Display Results 

       var result = document.getElementById ('lbf'); 
       var myResult = w * bf; 
       result.value = myResult.toFixed(0); 

       var result1 = document.getElementById ('lbm'); 
       var myResult1 = w - myResult; 
       result1.value = myResult1.toFixed(0); 

       var result2 = document.getElementById ('dwi'); 
       var myResult2 = myResult1 * wtr; 
       result2.value = myResult2.toFixed(0); 

       var result3 = document.getElementById ('dpi'); 
       var myResult3 = myResult1 * p; 
       result3.value = myResult3.toFixed(0); 


     } 



    </script> 



     </body></html> 

答えて

0

あなたはonblur()メソッドを使用して試みることができます。そのフィールドへのフォーカスが失われるとコードを実行します。私はonblurメソッド内の要素の値を変更できないことを知ったので、カスタムメソッドを作成して呼び出す必要があります。

<input name="protein" id="protein" size="3" type="text" onblur="copyValue(this)"> 

あなた<script></script>タグ内とあなたのfunction LBAcalc() { .....} 後に値をコピーするための新しい関数を作成します。

<input name="protein" id="protein" size="3" type="text" onchange="copyValue(event)"> 

'のonchange' イベントが発生値が変更されたとき:ユースケースを理解することが、ここに行くない

function copyValue(element) { 
    element.value = document.getElementById("water").value; 

}

+0

私はそのコードを試してもまだ動作しません。 –

+0

私はそれを調べただけで、onblurメソッドからフィールドの値を変更できないようです。だからあなたはカスタムjsメソッドを呼び出し、その要素を引数として渡すことができます。 'onblur =" changeValue(this) "'これはあなたの入力要素ですので、ここにあなたのメソッドがあります: 'changeValue(element){element.value = document.getElementById(" water ")。value;}' – Buildersrejected

+0

Iコーディングでこれをどこに置くべきかわからないのですか?私はコーディングでゼロの経験があります。 –

0

。要素は、その値を変更しましたが、コミットされなかった後にフォーカスを失ったとき(例えば<テキストエリアの値を編集した後に>または<入力タイプ=「テキスト」>)

だから、我々はただのonchangeを書く:MDNあたりハンドラ:

function copyValue(event) { 
    document.getElementById('dwi').value=event.target.value 
} 

(タンパク質入力すなわち)イベントを発射要素から値をコピーし、DWIのIDを持つ要素にコピーします。

また、ぼかしイベントを聞いてから、半秒の 'setTimeout'を実行し、コードを実行してタンパク質からdwiにコピーすることもできます。人がフィールドを離れるたびにぼかしが実行されますが、実際の変更(つまり6 - > 7)のときにのみコピーが行われます。

関連する問題