JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label for="keypress">Keypress</label>
    <input name="keypress"/>
    <br />
    <label for="keyup">Keyup</label>
    <input name="keyup"/>
    <br />
    <label for="keydown">Keydown</label>
    <input name="keydown" />
</form>
<div id="target">
    <p>The last key code you entered for keypress is: <span id="keypressEcho"></span></p>
    <p>The last key code you entered for keyup is: <span id="keyupEcho"></span></p>
    <p>The last key code you entered for keydown is: <span id="keydownEcho"></span></p>
</div>

JavaScript

var keypressInput = document.getElementsByName('keypress')[0];
var keypressTarget = document.getElementById('keypressEcho');

var keyupInput = document.getElementsByName('keyup')[0];
var keyupTarget = document.getElementById('keyupEcho');

var keydownInput = document.getElementsByName('keydown')[0];
var keydownTarget = document.getElementById('keydownEcho');

function keypressEvent(e, target) {
    keypressTarget.textContent = e.which;
}

function keyupEvent(e, target) {
    keyupTarget.textContent = e.which;
}

function keydownEvent(e, target) {
    keydownTarget.textContent = e.which;
}

keypressInput.addEventListener('keypress', keypressEvent);
keyupInput.addEventListener('keyup', keyupEvent);
keydownInput.addEventListener('keydown', keydownEvent);