如何为游戏制作点击键盘

Question

我正在使用vanilla javascript，html和css构建一个Hangman游戏。我有一个屏幕键盘，用HTML制作。我需要这样做，以便当您单击或按下某个键时，它会将按下的字母记录到屏幕上。我尝试为每个密钥提供一个 onclick 事件，但到目前为止还没有奏效。

欢迎任何建议。我也需要Javascript部分的建议。

Answer 1

对于一个字母数组怎么样，使用 JavaScript 映射函数为每个字母构建按钮。 然后循环并添加一个事件处理程序以记录按钮单击的值。

运行下面的代码段

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>