1
私は2つの数字を追加し、結果を別のボックスに表示する単純な電卓を構築しています。あるボックスからテキストをコピーして別のボックスに表示する方法を理解しましたが、それをクリアする方法がついていません。元のテキストボックスのデータはクリアされますが、表示ボックスのテキストボックスは消去されません。以下は、html、css、およびjsファイルのコードです。ドットで子要素を取得別のテキストボックスにコピーされたデータを削除または消去するにはどうすればよいですか？
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>
あなたの答えをいただき、ありがとうございます。これは素晴らしく、何か新しいことを学びました。 – Kevin
@ケビンあなたは答えを受け入れることができますか？ –