如何在Javascript中創建一個可以清除兩個文本區域的按鈕？

Question

到目前為止，這是我的代碼：

 function addtext() { var newtext = document.myform.inputtext.value; document.myform.outputtext.value += newtext; } 

 <form name="myform">&nbsp; <table align="center" border="0" cellpadding="5" cellspacing="0"> <tbody> <tr> <td><textarea name="inputtext"></textarea></td> <td> <p> <br /> <input onclick="addtext();" type="button" value="Strip HTML Formatting" /> </p> </td> <td><textarea readonly name="outputtext"></textarea></td> </tr> </tbody> </table> </form> 

現在，我想添加一個按鈕來清除兩個文本區域。
我應該在哪里放置JavaScript，它應該怎么說？

Answer 1

您可以使用reset type屬性：

<input type="reset" value="Reset" />

---

程式碼片段：

 function addtext() { var newtext = document.myform.inputtext.value; document.myform.outputtext.value += newtext; } 

 <form name="myform">&nbsp; <table align="center" border="0" cellpadding="5" cellspacing="0"> <tr> <td><textarea name="inputtext"></textarea></td> <td> <input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br /> <input type="reset" value="Reset" /> </td> <td><textarea readonly name="outputtext"></textarea></td> </tr> </table> </form> 

這會將所有表單值重置為其默認值。

---

如果除這些之外還有其他文本區域，而您只想清空這兩個文本區域，則應創建另一個按鈕，該按鈕鏈接到清空這些值的函數：

HTML ：

<input onclick="emptyText()" type="button" value="Clear fields" />

JS：

function emptyText() {
    document.myform.inputtext.value = "";
    document.myform.outputtext.value = "";
}

Answer 2

小提琴演示

HTML：

<table align="center" border="0" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <td>
        <textarea name="inputtext"></textarea>
      </td>
      <td>
        <p>
          <br />
          <input type="button" value="Strip HTML Formatting" />
        </p>
      </td>
      <td>
        <textarea name="inputtext" readonly></textarea>
      </td>
    </tr>
    <tr>
      <td>
        <button>Empty</button>
      </td>
    </tr>
  </tbody>
</table>

JavaScript：

var removeBtn = document.getElementsByTagName('button')[0];
var copyBtn = document.querySelector('input[type="button"]');
copyBtn.onclick = function () {
    var inpt = document.getElementsByTagName('textarea')[0].value;
    document.getElementsByTagName('textarea')[1].value = inpt;
}
removeBtn.onclick = function () {
    document.getElementsByTagName('textarea')[0].value = "";
    document.getElementsByTagName('textarea')[1].value = "";
}

Answer 3

選項1：

使用重置類型輸入按鈕：

 function addtext() { var newtext = document.myform.inputtext.value; document.myform.outputtext.value += newtext; } 

 <form name="myform">&nbsp; <table align="center" border="0" cellpadding="5" cellspacing="0"> <tr> <td><textarea name="inputtext"></textarea></td> <td> <input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br /> <input type="reset" value="Clear fields" /> <!--THIS LINE--> </td> <td><textarea readonly name="outputtext"></textarea></td> </tr> </table> </form> 

• 這會將所有表單值重置為其默認值。

---

選項2：

如果除這些之外還有其他文本區域，而您只想清空這兩個文本區域，則應創建另一個按鈕，該按鈕鏈接到清空這些值的函數：

 function addtext() { var newtext = document.myform.inputtext.value; document.myform.outputtext.value += newtext; } function clearFields() { document.myform.inputtext.value = ""; document.myform.outputtext.value = ""; } 

 <form name="myform">&nbsp; <table align="center" border="0" cellpadding="5" cellspacing="0"> <tr> <td><textarea name="inputtext"></textarea></td> <td> <input onclick="addtext()" type="button" value="Strip HTML Formatting" /><br /> <input onclick="clearFields()" type="button" value="Clear fields" /> <!--THIS LINE--> </td> <td><textarea readonly name="outputtext"></textarea></td> </tr> </table> </form> 

• 這實際上將兩個文本區域的值設置為“空”。