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

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 元素中的父级和深层子级则不起作用。您可以简单地通过 ID 获取该元素:

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