title: Transferring buttons value to input form
body: <p>So i'm trying to create a keypad that user will use to type in a password. I believe I can figure out the whole logic behind this, but I can't figure out how after clicking one of the button display the clicked value on the input form.</p>
  
  <p>My HTML looks like this:</p>
  
  <pre><code> &lt;div class="keypad"&gt;
  &lt;input type='text' id='display' placeholder='Enter Code' maxlength='4'&gt;
  &lt;div class='keys'&gt;
    &lt;div class='row'&gt;
      &lt;button&gt;1&lt;/button&gt;
      &lt;button&gt;2&lt;/button&gt;
      &lt;button&gt;3&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class='row'&gt;
      &lt;button&gt;4&lt;/button&gt;
      &lt;button&gt;5&lt;/button&gt;
      &lt;button&gt;6&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class='row'&gt;
      &lt;button&gt;7&lt;/button&gt;
      &lt;button&gt;8&lt;/button&gt;
      &lt;button&gt;9&lt;/button&gt;
    &lt;/div&gt;
   &lt;div class='row'&gt;
     &lt;button&gt;blank&lt;/button&gt;
     &lt;button&gt;0&lt;/button&gt;
     &lt;button&gt;blank&lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And keypad looks like this 
  <a href="https://i.stack.imgur.com/d3CtU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/d3CtU.jpg" alt="enter image description here"></a></p>
  
  <p>So, to sum this up, if the user clicked 1, 4, 5, 7 buttons I want to display (while removing the placeholder text) a 1457 number.</p>
  
  <p>And I would be extremely graetful for pure JS help, I dont want to use jquery here.</p>