title: How to add value to input by clicking on another input
body: <p>I have a problem with my project. What I am trying to do is basically an ATM. But I have a problem with adding a value to an input, by clicking on another input/button like in a real ATM. Can someone explain how it should be done?</p>
  <p>Here is my code:</p>
  <pre><code>&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
     &lt;meta charset=&quot;UTF-8&quot;&gt;
     &lt;title&gt;ATM&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  Please enter your pin:
  &lt;form action=&quot;/script2.js&quot; method=&quot;get&quot;&gt;
     &lt;input type=&quot;password&quot; name=&quot;pin&quot; pattern=&quot;[0-9]{4}&quot; maxlength=&quot;4&quot; id=&quot;pin&quot; value=&quot;&quot;&gt;
     &lt;input type=&quot;button&quot; value=&quot;1&quot;  onclick=&quot;add(this.value)&quot;&gt;
     &lt;input type=&quot;submit&quot; value=&quot;Validate&quot;&gt;
  &lt;/form&gt;
  
  
  
  &lt;script src=&quot;script.js&quot;&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt; ```
  
  and JS: 
  
  const pinPassword = document.getElementById('pin').value;
  
  function add(x){
     pinPassword.value = x;
  }
  
  </code></pre>