При клике на элемент класть его в textarea

Question

Вопрос:

Имеется клавиатура с событием:

app.addEventListener('keydown', inputData)

Событие корректно работает и выводиться в область textarea, но теперь необходимо чтобы при клике мышкой на элемент клавиатуры, данные так же попадали в textarea.

HTML:

<div class = "app">
  <div class="keyboard">
    <div class="key" data-action="192">ё</div>
  </div>
</div>

P.S data-action="192" это event.keyCode клавиатуры.

Подскажите пожалуйста как это возможно сделать, если можно наглядно, желательно на чиcтом JS.

UPDATE (дополнено из комментария):

У меня имеется электронная клавиатура написанная на HTML + JS.

Один из элементов клавиатуры:

<div class="key" data-action="192">ё</div>

При клике на него мышкой необходимо чтобы значение попадало в область:

<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры"></textarea>
<span id="id"></span>

Answer 1

const textarea = document.querySelector("textarea")

const handleClick = event => {
  const value = event.target.dataset.action
  // или
  // const value = event.target.textContent
  textarea.value = value
  // или
  // что бы выводить всю последовательность
  // textarea.value += ` ${value}`
}

document.querySelectorAll(".key").forEach(item => 
  item.addEventListener("click", handleClick))

.key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background-color: red;
  cursor: pointer; 
}

<div class="key" data-action="192">ё</div> 
<textarea name="screen" id="area" cols="30" rows="10" placeholder="Введите данные с клавиатуры"></textarea>

БЛОГ НА HUSL

При клике на элемент класть его в textarea

Ответы (1 шт):