Javascript-форум - Вызвать значение из HTML тега с помощью класса

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Вызвать значение из HTML тега с помощью класса (https://javascript.ru/forum/events/68624-vyzvat-znachenie-iz-html-tega-s-pomoshhyu-klassa.html)

Вызвать значение из HTML тега с помощью класса

Так как я реально чайник.
Объясните возможно ли извлечь значение с помощью класса?

Дело в следующем, я хочу сделать виртуальную клавиатуру таким образом:

<div id="display"></div>

<div id="KeyQ" class="key" value="Q">Q</div>
<div id="KeyW" class="key" value="W">W</div>
<div id="KeyE" class="key" value="E">E</div>

Я могу вывести буквы в тег с идентификатором #display таким образом с помощью идентификатора:

KeyQ.onclick = function() {
document.getElementById("display").innerHTML = "Q";
}

Но таким образом придётся каждому создавать отдельное событие, таким образом код палучится бесконечным.

Я бы хотел вместит все действие в одну функцию используя клас "key" и брат значение у того элемента который был задиствован.
По своей логике сделал так но получаю undefined:

key.onclick = function() {
var val = document. querySelector(".key").value;
document.getElementById("display").innerHTML = val;
}

Может с помощью this который я не понял как он вообще работает или другой метод.

<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) {
   if (e.target != e.currentTarget) { document.getElementById("display").innerText += e.target.innerText; }
}
</script>

Цитата:

Сообщение от Dilettante_Pro (Сообщение 451197)

<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 он выводит весь существующий в ном текс.

Здесь нужна проверка источника события. Можно проверять по имени класса, а можно кнопки сделать к примеру элементами SPAN и проверять имя тега. И если условие выполняется, только тогда принимать ввод.

Amilo,
Добавил проверку по рекомендации laimas

Спасибо вам вот теперь то что надо :)

Dilettante_Pro,
currentTarget не все гладко с поддержкой.

laimas,
В Internet Explorer с 6 по 8 ? Это актуально?
По мобильным - да.
(на смартфоне в Хроме под Андроидом работает)
Но ТС только начинает тему - у него еще много проблем появится

Да вроде бы и в Сафари не все Ок, или уже есть поддержка?

laimas,
Вроде нету - проверить не могу, у меня надкушенных яблок нету. Дома вечером у жены отберу - гляну.