如何删除或清除已复制到其他文本框的数据？

Question

我正在构建一个简单的计算器，它可以添加两个数字并将结果显示在另一个框中。我已经想出如何从一个盒子中复制文本并将其显示在另一个盒子中，但我仍然坚持如何清除它。原始文本框中的数据将清除，但不会显示在显示框中的文本框中。下面是html，css和js文件的代码。

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

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

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

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

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

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

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

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

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

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

Answer 1

通过点获取子元素可以在FORM及其子项INPUT中使用，只需按 NAME ，但不能在其他HTML元素中为Parent和deep Children工作。您只需通过ID获取该元素：

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

Answer 2

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

应该在表单标记内部重置表单中的输入，而无需任何其他javascript来重置输入值，在这种情况下，您可以在使用时删除startOver()函数input type="reset"。如果你坚持使用javascript，那么请使用其他答案。

Answer 3

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

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

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

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;