Kann nicht ein Feld zu einem anderen kopieren

Ich versuche, den Wert von Wasser zu erhalten, um den Wert von Protein zu kopieren, sobald der Benutzer aus dem Proteinfeld angeklickt oder weggerutscht hat. Ich habe ein paar Beispiele auf dieser Site ausgecheckt, konnte aber keine von ihnen mit meinem Code arbeiten. Ich bin mir sicher, dass es etwas sehr einfaches ist, ich bin mir einfach nicht sicher, wie ich es machen soll.Kann nicht ein Feld zu einem anderen kopieren

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

Quelle

2016-05-12 Christopher Gagnon

Sie versuchen, die onblur() Methode könnte. Der Code wird ausgeführt, sobald der Fokus auf dieses Feld verloren gegangen ist. Ich habe herausgefunden, dass Sie den Wert eines Elements in der onblur-Methode nicht ändern können. Daher müssen Sie eine benutzerdefinierte Methode erstellen und aufrufen.

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

In Ihrem <script> und </script> Tag und nach dem function LBAcalc() { .....} Erstellen Sie eine neue Funktion, um den Wert zu kopieren.

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

}

Quelle

2016-05-12 03:29:36 Buildersrejected

Ich habe diesen Code versucht und es funktioniert immer noch nicht. –

Ich habe gerade nachgeschlagen und es scheint, dass Sie den Wert des Feldes nicht von der Onblur-Methode ändern können. Sie können also eine benutzerdefinierte js-Methode aufrufen und das Element als Argument übergeben. 'onblur =" changeValue (this) "' merke 'das' ist dein Eingabeelement, also hier ist deine Methode: 'changeValue (Element) {element.value = document.getElementById (" Wasser "). value;}' – Buildersrejected

I bin ich mir nicht wirklich sicher, wo ich das in die Codierung bringen soll? Ich habe keine Erfahrung mit der Codierung. –

nicht den Anwendungsfall zu verstehen, aber hier geht:

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

Die 'onchange' Ereignis wird ausgelöst, wenn der Wert geändert hat. Per MDN: Wenn verliert das Element des Fokus nach seinem Wert geändert wurde, aber nicht verpflichtet (zB nach dem Wert von < TextArea- Bearbeiten> oder < input type = „text“>)

Also, dann aufzuschreiben wir gerade einen Onchange Handler:

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

, dass der Wert aus dem Element kopiert, die das Ereignis (Eingang dh das Protein) gebrannt, und es auf das Element kopieren, die die ID des DWI hat.

Alternativ können Sie ein Blur-Ereignis hören und dann eine 'setTimeout' von einer halben Sekunde ausführen und dann den Code ausführen, um von Protein zu Dwi zu kopieren. Blur würde jedes Mal ausgeführt, wenn die Person das Feld verließ, während Änderung nur bewirkt, dass die Kopie bei einer tatsächlichen Änderung (d. H. 6 -> 7)

Quelle

2016-05-13 00:33:42 Stephen

Kann nicht ein Feld zu einem anderen kopieren

Antwort

Verwandte Themen