如何使用功能（for循環）從按鈕獲取用戶輸入以在文本框中顯示？

Question

當用戶單擊數字按鈕時，如何使數字顯示在顯示文本框中？ 我不知道要在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>

先感謝您。

Answer 1

首先，點擊事件附加到所有按鈕，所以得到了所有按鈕元素type=button使用.querySelectorAll()通過他們，然后循環，並挑選一個一個buttons[i] ，並使用附加click事件.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>