Как сделать игровую клавиатуру для игры

Question

Я создаю игру Hangman, используя ванильный javascript, html и css.У меня есть экранная клавиатура, выполненная в HTML.Мне нужно сделать так, чтобы при нажатии или нажатии клавиши регистрировалась буква, нажатая на экран.Я пытался дать каждому ключу событие onclick, но пока это не сработало.

Любые предложения приветствуются.Мне также нужны предложения по части Javascript.

Answer 1

как насчет массива ваших букв, используйте функцию javascript map для построения кнопок для каждой буквы.затем выполните цикл и добавьте обработчик событий, чтобы зарегистрировать значение нажатия кнопки.

запустить фрагмент ниже

const letters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']
const content = letters.map(x => `<button type="button" class="btn btn-secondary letter-button" value="${x}">${x}</button>`);
const div = document.getElementById('buttonGroup')
const output = document.getElementById('output');
div.innerHTML += content;

Array.from(document.getElementsByClassName("letter-button"))
  .forEach((e) => e.addEventListener('click', () => output.innerHTML += e.value));

<div class="container">
  <div class="row">
    <div class="btn-group" role="group" aria-label="Basic example" id="buttonGroup">
    </div>
  </div>
  <div class=row>
    <span class="badge badge-secondary" id="output"></span>
  </div>
</div>