How to use physical keypresses to type in something on screen and simulate a virtual keyboard (Javascript)

Question

I am making a word guessing game that displays an HTML keyboard on screen as follows for a user to type:

<div id="qwerty" class="section">
    <div class="keyrow">
      <button>q</button><button>w</button><button>e</button><button>r</button
      <button>t</button><button>y</button><button>u</button><button>i</button> 
      <button>o</button><button>p</button>
    </div>
    <div class="keyrow">
      <button>a</button><button>s</button><button>d</button><button>f</button> 
      <button>g</button><button>h</button><button>j</button><button>k</button>
      <button>l</button>
    </div>
    <div class="keyrow">
      <button>z</button><button>x</button><button>c</button><button>v</button> 
      <button>b</button><button>n</button><button>m</button>
    </div>
</div>

In javascript, how do I essentially "link" up physical keypresses so that I can either click one of the HTML buttons on screen or press an actual key to do the same thing for both?

Answer 1

Loop over the buttons, assign click event listeners, and then append to the value of the input:

<div id="qwerty" class="section">
    <div class="keyrow">
      <button>q</button><button>w</button><button>e</button><button>r</button>
      <button>t</button><button>y</button><button>u</button><button>i</button> 
      <button>o</button><button>p</button>
    </div>
    <div class="keyrow">
      <button>a</button><button>s</button><button>d</button><button>f</button> 
      <button>g</button><button>h</button><button>j</button><button>k</button>
      <button>l</button>
    </div>
    <div class="keyrow">
      <button>z</button><button>x</button><button>c</button><button>v</button> 
      <button>b</button><button>n</button><button>m</button>
    </div>
</div>

<input id="input" />

var input = document.querySelector('#input')

document.querySelectorAll('#qwerty button').forEach(el => {
  el.addEventListener('click', () => {
    input.value = input.value + el.innerText
  })
})

Demo: https://jsbin.com/zawavahuzo/edit?html,js,output