Question

我正在使用香草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>

如何制作游戏的onclick键盘

1 个答案: