如何获取按钮输入以显示在文本区域

How to get button input to display on textarea

本文关键字：显示 文本 区域 输入 按钮 何获取 获取      更新时间：2023-09-26
<body>
<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
    <table border="1" cellpadding="1" cellspacing="1" width="30%">
        <tr>
            <td colspan="4"><textarea style="width:100%" name="txtResult"></textarea></td>
        </tr>
        <tr>
            <td colspan="4"><input type="reset" style="width:100%"/></td>
        </tr>
        <tr>
            <td><input type="button" value="      7      " onclick="7"/></td>
            <td><input type="button" value="      8      " onclick="8"/></td>
            <td><input type="button" value="      9      " onclick="9"/></td>
            <td><input type="button" value="     +      " onclick="plus()"/></td>
        </tr>
        <tr>
            <td><input type="button" value="      4      " onclick="4"/></td>
            <td><input type="button" value="      5      " onclick="5"/></td>
            <td><input type="button" value="      6      " onclick="6"/></td>
            <td><input type="button" value="      -      " onclick="subtract()"/></td>
        </tr>
        <tr>
            <td><input type="button" value="      1      " onclick="1"/></td>
            <td><input type="button" value="      2      " onclick="2"/></td>
            <td><input type="button" value="      3      " onclick="3"/></td>
            <td><input type="button" value="      *      " onclick="times()"/></td>
        </tr>
        <tr>
            <td><input type="button" value="      0      " onclick="0"/></td>
            <td><input type="button" value="      .       " onclick="."/></td>
            <td><input type="button" value="      =      " onclick="total()"/></td>
            <td><input type="button" value="      /      " onclick="divide()"/></td>
        </tr>
    </table>
</form>
</center>
</body>

我正在做一个计算器。如何使按钮的输入显示在文本区域上？我必须像普通计算器一样使数字显示在文本区域。我不能使用jquery，因为我们还没有学会它。

要将数字添加到文本区域，您可以使用以下代码：

var button = document.querySelectorAll('input[type=button]');
for(var x=0; x<button.length; x++)
{
    button[x].addEventListener('click', function(e) {
     var a = document.getElementById('txt').value;
     document.getElementById('txt').value = a + this.value;

    });
}

如果你想要一个与选择器匹配的所有元素的列表，你可以使用 document.querySelectorAll（） 并循环遍历对象列表。

您将需要更改html并删除所有错误的点击，您也应该仅将value属性用于实际值而不是代码样式，因为输出也将包含空格。

<center>
<h1>Online Calculator</h1>
<hr/>
<form name="frmCalculator" action="">
    <table border="1" cellpadding="1" cellspacing="1" width="30%">
        <tr>
            <td colspan="4"><textarea style="width:100%" id="txt" name="txtResult"></textarea></td>
        </tr>
        <tr>
            <td colspan="4"><input type="reset" style="width:100%"/></td>
        </tr>
        <tr>
            <td><input type="button" value="7"/></td>
            <td><input type="button" value="8"/></td>
            <td><input type="button" value="9"/></td>
            <td><input type="button" value="+" /></td>
        </tr>
        <tr>
            <td><input type="button" value="4" /></td>
            <td><input type="button" value="5" /></td>
            <td><input type="button" value="6" /></td>
            <td><input type="button" value="-" /></td>
        </tr>
        <tr>
            <td><input type="button" value="1" /></td>
            <td><input type="button" value="2"/></td>
            <td><input type="button" value="3" /></td>
            <td><input type="button" value="*" /></td>
        </tr>
        <tr>
            <td><input type="button" value="0" /></td>
            <td><input type="button" value="." /></td>
            <td><input type="button" value="="/></td>
            <td><input type="button" value="/" /></td>
        </tr>
    </table>
</form>
</center>

我没有实现计算函数，但我希望这足以让你开始。

简单地说，你可以做到：

<input type="button" value="7" onclick="this.form.txtResult.value = this.value">

但是，您可能希望向每个按钮添加一个侦听器，该侦听器是一个执行相同操作的数字。最简单的方法是向数字按钮添加一个类，并为它们提供相同的侦听器，因此：

<input type="button" value="7" class="numberButton">

并使用 load 事件添加侦听器：

window.onload = function() {
  var buttons = document.querySelectorAll('.numberButton');
  for (var i=0, iLen=buttons.length; i<iLen; i++) {
    buttons[i].onclick = function(){
      this.form.txtResult.value += this.value;
    };
  }
};

您还可以为其他按钮添加特定的侦听器。

附言。若要使按钮的大小相同，请使用样式将宽度设置为相同，不要使用该值。

相关文章：