Question

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

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

Answer 1

要将数字添加到textarea，您可以使用以下代码：

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并删除所有错误的onclicks，您也应该仅将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>

我没有实现计算功能，但我希望这对你来说已经足够了。

Answer 2

简单地说，你可以这样做：

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

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

PS。要使按钮具有相同的大小，请使用样式设置相同的宽度，不要使用该值。

如何获取按钮输入以显示在textarea上

2 个答案: