[Amilo]

<style>
#display {
    height:20px;
}
.key {
   display:inline-block;
   border:1px solid black;
}
</style>
<div id="display"></div>
<div id="keys">
   <div id="KeyQ" class="key">Q</div>
   <div id="KeyW" class="key">W</div>
   <div id="KeyE" class="key">E</div>
</div>
<script>
document.getElementById("keys").onclick = function(e) {
   document.getElementById("display").innerText += e.target.innerText;
}
</script>

Идея хорошая но проблема в том что если нажать на DIV с идентификатором keys он выводит весь существующий в ном текс.