如何在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> 

• 这实际上将两个文本区域的值设置为“空”。