Dianna Dianna - 27 days ago 7
HTML Question

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

How to get the numbers displayed in the display textbox when the user clicks the number buttons? I do not know what to put in my

numInputF()
function, I want to use a for-loop function, but I do not know how.

<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(){

}


This is my body part. I know that I should put something on the onclick button, but I have not figured out how to make my function, which is why it is blank.

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


Thank you in advance.

Answer

First attach the click event to all the buttons, so get all buttons elements with type=button using .querySelectorAll() then loop through them and pick one by one buttons[i] and attach the click event using .addEventListener this click will lead us to the function numInputF as defined in the passed arguments :

var buttons = document.querySelectorAll('[type="button"]');

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

Then in your function you could get the value like :

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

Hope this helps.

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>