如何使用函数(for循环)从按钮中获取用户输入以显示在文本框中

How to get the user input from buttons to display in the text box using function (for-loop)?

本文关键字：输入 用户 获取 显示 文本 按钮 函数 何使用 for 循环      更新时间：2023-09-26

当用户单击数字按钮时，如何获得显示文本框中显示的数字?我不知道在我的numInputF()函数中放入什么，我想使用for循环函数，但我不知道如何使用。

    <script>
        var initialMoney = 1000; //Customer's initial money is $1000
        var display;
        /* Set the "Type amount and select operation to blank." */
        function setBlankF(){
            document.getElementById("display").value = "";
        }
        /* Gets the user input when buttons are clicked. */
        function numInputF(){
        }

这是我身体的一部分。我知道我应该在onclick按钮上放一些东西，但我还没有弄清楚如何使我的功能，这就是为什么它是空白的。

        <table border="1">
            <caption>ATM 360</caption>
                <tr>
                    <td colspan="4">
                        <input type="text" id="display" value="Type amount and select operation" size="30" onclick="setBlankF()">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="1" onclick="">
                    </td>
                    <td>
                        <input type="button" value="2" onclick="">
                    </td>
                    <td>
                        <input type="button" value="3" onclick="">
                    </td>
                    <td>
                        <input type="button" value="Withdrawal" id="withdraw" onclick="">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="4" onclick="">
                    </td>
                    <td>
                        <input type="button" value="5" onclick="">
                    </td>
                    <td>
                        <input type="button" value="6" onclick="">
                    </td>
                    <td>
                        <input type="button" value="Deposit" id="deposit" onclick="">
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" value="7" onclick="">
                    </td>
                    <td>
                        <input type="button" value="8" onclick="">
                    </td>
                    <td>
                        <input type="button" value="9" onclick="">
                    </td>
                    <td>
                        <input type="button" value="Retype" id="retype" onclick="">
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <input type="button" value="0" onclick="">
                    </td>
                    <td>
                    </td>
                    <td>
                        <input type="button" value="End" id="end" onclick="">
                    </td>
                </tr>
        </table>

提前感谢。

首先将单击事件附加到所有按钮上，因此使用.querySelectorAll()获得type=button的所有按钮元素，然后循环它们并逐个选择buttons[i]并使用.addEventListener附加单击事件。此单击将引导我们到传递参数中定义的函数numInputF:

var buttons = document.querySelectorAll('[type="button"]');
for(var i=0;i<buttons.length;i++){
     buttons[i].addEventListener("click", numInputF, false);
}

然后在你的函数中你可以得到这样的值:

function numInputF(){
    alert(this.value);
}

希望对你有帮助。

var buttons = document.querySelectorAll('[type="button"]');
for(var i=0;i<buttons.length;i++){
  buttons[i].addEventListener("click", numInputF, false);
}
function numInputF(){
  alert(this.value);
}
<table border="1">
  <caption>ATM 360</caption>
  <tr>
    <td colspan="4">
      <input type="text" id="display" value="Type amount and select operation" size="30" onclick="setBlankF()">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="1" onclick="">
    </td>
    <td>
      <input type="button" value="2" onclick="">
    </td>
    <td>
      <input type="button" value="3" onclick="">
    </td>
    <td>
      <input type="button" value="Withdrawal" id="withdraw" onclick="">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="4" onclick="">
    </td>
    <td>
      <input type="button" value="5" onclick="">
    </td>
    <td>
      <input type="button" value="6" onclick="">
    </td>
    <td>
      <input type="button" value="Deposit" id="deposit" onclick="">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="7" onclick="">
    </td>
    <td>
      <input type="button" value="8" onclick="">
    </td>
    <td>
      <input type="button" value="9" onclick="">
    </td>
    <td>
      <input type="button" value="Retype" id="retype" onclick="">
    </td>
  </tr>
  <tr>
    <td>
    </td>
    <td>
      <input type="button" value="0" onclick="">
    </td>
    <td>
    </td>
    <td>
      <input type="button" value="End" id="end" onclick="">
    </td>
  </tr>
</table>

相关文章：