Wie lösche oder lösche ich Daten, die in ein anderes Textfeld kopiert wurden?

Question

Ich baue einen einfachen Rechner, der zwei Zahlen addiert und das Ergebnis in einer anderen Box anzeigt. Ich habe herausgefunden, wie man Text aus einer Box kopiert und in einer anderen anzeigt, aber ich merke, wie man es löscht. Die Daten aus den ursprünglichen Textfeldern werden gelöscht, aber nicht aus den Textfeldern in der Anzeige. Unten ist der Code für die HTML-, CSS- und JS-Dateien.

function startOver() { 
 
\t  document.demo_form.txt1.value=""; 
 
\t  document.demo_form.txt2.value=""; 
 
\t  document.demo_info.txtresult.value=""; 
 
\t  document.getElementById("demo_info").innerHTML=""; 
 
     } 
 

 
    
 
     function copy() { 
 
\t  var txt1 = document.getElementById("txt1"); 
 
\t  var field1 = document.getElementById("field1"); 
 
\t  field1.value=txt1.value; 
 
     var txt2 = document.getElementById("txt2"); 
 
\t  var field2 = document.getElementById("field2"); 
 
\t  field2.value=txt2.value; 
 
     } 
 
    
 
    
 
     function calculate(){ 
 
\t  var q=parseInt(document.getElementById("txt1").value); 
 
\t  var w=parseInt(document.getElementById("txt2").value); 
 

 
\t  var result=q+w; 
 
\t \t if(isNaN(q)||isNaN(w)){ 
 
     alert("please enter a number"); 
 
\t \t } 
 
\t \t else 
 
     { 
 
\t \t var result=q+w; 
 
\t \t 
 
     document.getElementById("txtresult").value=result; 
 
     } 
 
     }

 #container { 
 
\t  width:650px; 
 
\t  height:450px; 
 
\t  margin:0px auto; 
 
\t  padding:10px; 
 
\t  background-color:white; 
 
\t  border:1px solid black; 
 
     } 
 

 
     #demo_src { 
 
\t  float: left; 
 
\t  width: 250px; 
 
\t  height: 220px; 
 
\t  margin-bottom: 10px; 
 
\t  border: 1px solid blue; 
 
\t  } 
 

 
     #demo_info { 
 
\t  float: right; 
 
\t  width: 350px; 
 
\t  height: 220px; 
 
\t  margin-bottom: 10px; 
 
\t  border: 1px solid orange; 
 
     } 
 

 
     #table_header { 
 
\t  clear: both; 
 
\t  width: 649px; 
 
\t  height: 50px; 
 
\t  border: 1px solid black; 
 
     } 
 

 
     #table { 
 
\t  overflow: auto; 
 
\t  width: 649px; 
 
\t  height: 20px; 
 
\t  border: 1px solid black; 
 
     } 
 

 
     #table { 
 
\t  align: center; 
 
\t  font-family: Sans-serif; 
 
\t  font-size: 13px; 
 
     }

\t \t <div id="container"> 
 
\t \t <h2>Simple Calculator</h2> 
 
\t \t <div id="demo_src"> 
 
\t \t <form name="demo_form"> 
 
\t \t <table style=margin:10px;> 
 
\t \t <tr> 
 
\t \t <td>Enter the First Number:</td> 
 
\t \t <td><input type = "text" name="txt1" id="txt1" size = "10"/></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t <td>Enter the Second Number:</td> 
 
\t \t <td><input type = "text" name="txt2" id="txt2" size = "10"/></td> 
 
\t \t </tr> 
 
\t \t <td><input type="button" value="Add" onclick="calculate(); 
 
     copy()"/></td> 
 
\t \t <td><input type = "button" onclick = "startOver()" 
 
     value = "Start Over"/></td> 
 
\t \t </table> 
 
\t \t </form> 
 
\t \t </div> 
 
\t \t <div id = "demo_info"> 
 
\t \t <table style=margin:10px;> 
 
\t \t <tr> 
 
\t \t <td>Field 1:</td> 
 
\t \t <td><input type="text" name="field1" id="field1" size="15"/></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t <td>Field 2:</td> 
 
\t \t <td><input type = "text" name="field2" id="field2" size = "15"/></td> 
 
\t \t </tr> 
 
\t \t <tr> \t 
 
    \t \t <td>Result: </td> 
 
\t \t <td><input type="text" id="txtresult" size="10"></td> 
 
\t \t </tr> 
 
\t \t </table> \t \t \t 
 
\t \t </div> 
 
\t \t </div> 
 
     </body> 
 
     </html>

Answer 1

Kinder Elemente von Punkt zu erhalten ist in Form und seine Kinder INPUTs OK und nur durch ihre NAMEN aber für Eltern und Kinder tief in anderen HTML-Elementen nicht funktionieren. Sie können einfach anstelle dieses Element von ID erhalten:

document.getElementById("txtresult").value=""; 

Answer 2

<input type="reset" value="Start Over"> 

sollte in einem Formular-Tag arbeiten, um die Eingaben in einem Formular ohne die Notwendigkeit für zusätzliche Javascript zurücksetzen Eingaben zurücksetzen Werte, in diesem Fall Sie können startOver() Funktion entfernen, wenn Sie input type="reset" verwenden. Wenn Sie darauf bestehen, Javascript zu verwenden, dann gehen Sie mit den anderen Antworten.

Answer 3

function startOver() { 
 
     document.getElementById("demo_form_id").reset(); 
 
     document.getElementById("field1").value=""; 
 
     document.getElementById("field2").value=""; 
 
     document.getElementById("txtresult").value=""; 
 
     } 
 

 
    
 
     function copy() { 
 
\t  var txt1 = document.getElementById("txt1"); 
 
\t  var field1 = document.getElementById("field1"); 
 
\t  field1.value=txt1.value; 
 
     var txt2 = document.getElementById("txt2"); 
 
\t  var field2 = document.getElementById("field2"); 
 
\t  field2.value=txt2.value; 
 
     } 
 
    
 
    
 
     function calculate(){ 
 
\t  var q=parseInt(document.getElementById("txt1").value); 
 
\t  var w=parseInt(document.getElementById("txt2").value); 
 

 
\t  var result=q+w; 
 
\t \t if(isNaN(q)||isNaN(w)){ 
 
     alert("please enter a number"); 
 
\t \t } 
 
\t \t else 
 
     { 
 
\t \t var result=q+w; 
 
\t \t 
 
     document.getElementById("txtresult").value=result; 
 
     } 
 
     }

 #container { 
 
\t  width:650px; 
 
\t  height:450px; 
 
\t  margin:0px auto; 
 
\t  padding:10px; 
 
\t  background-color:white; 
 
\t  border:1px solid black; 
 
     } 
 

 
     #demo_src { 
 
\t  float: left; 
 
\t  width: 250px; 
 
\t  height: 220px; 
 
\t  margin-bottom: 10px; 
 
\t  border: 1px solid blue; 
 
\t  } 
 

 
     #demo_info { 
 
\t  float: right; 
 
\t  width: 350px; 
 
\t  height: 220px; 
 
\t  margin-bottom: 10px; 
 
\t  border: 1px solid orange; 
 
     } 
 

 
     #table_header { 
 
\t  clear: both; 
 
\t  width: 649px; 
 
\t  height: 50px; 
 
\t  border: 1px solid black; 
 
     } 
 

 
     #table { 
 
\t  overflow: auto; 
 
\t  width: 649px; 
 
\t  height: 20px; 
 
\t  border: 1px solid black; 
 
     } 
 

 
     #table { 
 
\t  align: center; 
 
\t  font-family: Sans-serif; 
 
\t  font-size: 13px; 
 
     }

\t \t <div id="container"> 
 
\t \t <h2>Simple Calculator</h2> 
 
\t \t <div id="demo_src"> 
 
\t \t <form name="demo_form" id="demo_form_id"> 
 
\t \t <table style=margin:10px;> 
 
\t \t <tr> 
 
\t \t <td>Enter the First Number:</td> 
 
\t \t <td><input type = "text" name="txt1" id="txt1" size = "10"/></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t <td>Enter the Second Number:</td> 
 
\t \t <td><input type = "text" name="txt2" id="txt2" size = "10"/></td> 
 
\t \t </tr> 
 
\t \t <td><input type="button" value="Add" onclick="calculate(); 
 
     copy()"/></td> 
 
\t \t <td><input type = "button" onclick = "startOver()" 
 
     value = "Start Over"/></td> 
 
\t \t </table> 
 
\t \t </form> 
 
\t \t </div> 
 
\t \t <div id = "demo_info"> 
 
\t \t <table style=margin:10px;> 
 
\t \t <tr> 
 
\t \t <td>Field 1:</td> 
 
\t \t <td><input type="text" name="field1" id="field1" size="15"/></td> 
 
\t \t </tr> 
 
\t \t <tr> 
 
\t \t <td>Field 2:</td> 
 
\t \t <td><input type = "text" name="field2" id="field2" size = "15"/></td> 
 
\t \t </tr> 
 
\t \t <tr> \t 
 
    \t \t <td>Result: </td> 
 
\t \t <td><input type="text" id="txtresult" size="10"></td> 
 
\t \t </tr> 
 
\t \t </table> \t \t \t 
 
\t \t </div> 
 
\t \t </div> 
 
     </body> 
 
     </html>