如何在Javascript中创建一个清除两个textareas的按钮？

Question

到目前为止，这是我的代码：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

现在我想添加一个清除两个textareas的按钮 我应该把JavaScript放在哪里，它应该说什么？

Answer 1

您可以使用重置类型属性：

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

---

代码段：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这会将所有表单值重置为默认值。

---

如果除了这些之外还有其他textareas并且你只想清空这两个，你应该创建另一个链接到清空值的函数的按钮：

<强> HTML ：

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

<强> JS：

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

Answer 2

Fiddle

上的演示

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：

使用重置类型输入按钮：

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

• 这会将所有表单值重置为默认值。

---

选项2：

如果除了这些之外还有其他textareas并且你只想清空这两个，你应该创建另一个链接到清空值的函数的按钮：

＆＃13;

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

• 这确实将两个textareas的值设置为＆＃39; empty＆＃39;。