javascript - 如何使用 HTML DOM 在数独板上轻松使用输入

Question

所以我有一个数独板，它使用一个有 9 和 81 的表格，每个表格在 2d 数组中的索引 id 为 id="yx"。

<table class="board">
    <tr><td id="0-0"></td><td id="0-1"></td><td id="0-2"></td><td id="0-3"></td><td id="0-4"></td><td id="0-5"></td><td id="0-6"></td><td id="0-7"></td><td id="0-8"></td></tr>
    <tr><td id="1-0"></td><td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td><td id="1-7"></td><td id="1-8"></td></tr>
    <tr><td id="2-0"></td><td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td><td id="2-7"></td><td id="2-8"></td></tr>
    <tr><td id="3-0"></td><td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td><td id="3-7"></td><td id="3-8"></td></tr>
    <tr><td id="4-0"></td><td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td><td id="4-7"></td><td id="4-8"></td></tr>
    <tr><td id="5-0"></td><td id="5-1"></td><td id="5-2"></td><td id="5-3"></td><td id="5-4"></td><td id="5-5"></td><td id="5-6"></td><td id="5-7"></td><td id="5-8"></td></tr>
    <tr><td id="6-0"></td><td id="6-1"></td><td id="6-2"></td><td id="6-3"></td><td id="6-4"></td><td id="6-5"></td><td id="6-6"></td><td id="6-7"></td><td id="6-8"></td></tr>
    <tr><td id="7-0"></td><td id="7-1"></td><td id="7-2"></td><td id="7-3"></td><td id="7-4"></td><td id="7-5"></td><td id="7-6"></td><td id="7-7"></td><td id="7-8"></td></tr>
    <tr><td id="8-0"></td><td id="8-1"></td><td id="8-2"></td><td id="8-3"></td><td id="8-4"></td><td id="8-5"></td><td id="8-6"></td><td id="8-7"></td><td id="8-8"></td></tr>
</table>

我的问题是：使用 vanilla javascript，我如何检测每个点击然后等待键盘或鼠标输入（屏幕上有数字）并将其添加到 innerHTML 而不需要 81 行代码并且可能更多的功能？

标签： javascripthtmldom

Answer 1

一种方法是只在表本身上添加一个事件侦听器。

事件在处理程序回调中公开一个事件对象。对于用户事件，有一个target是事件发生的实际元素。因此，在您的情况下，您可以检查目标是<td>

我只向您展示非常简单的点击事件来帮助您入门，而不是创建您需要的所有功能

对于您的下一步，您可以向元素添加一个类以更改其背景样式，您还可以制作所有元素contenteditable以允许用户在其中写入。您还可以研究其他事件focus并blur跟踪更改

const table = document.querySelector('table.board');

table.addEventListener('click', function(event){
  if(event.target.matches('td')){
     console.clear()
     console.log('Cell clicked', event.target.id)
  }
})

td { width: 30px; height: 30px; border: 1px solid #ccc}

<table class="board">
    <tr><td id="0-0"></td><td id="0-1"></td><td id="0-2"></td><td id="0-3"></td><td id="0-4"></td><td id="0-5"></td><td id="0-6"></td><td id="0-7"></td><td id="0-8"></td></tr>
    <tr><td id="1-0"></td><td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td><td id="1-7"></td><td id="1-8"></td></tr>
    <tr><td id="2-0"></td><td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td><td id="2-7"></td><td id="2-8"></td></tr>
    <tr><td id="3-0"></td><td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td><td id="3-7"></td><td id="3-8"></td></tr>
    <tr><td id="4-0"></td><td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td><td id="4-7"></td><td id="4-8"></td></tr>
    <tr><td id="5-0"></td><td id="5-1"></td><td id="5-2"></td><td id="5-3"></td><td id="5-4"></td><td id="5-5"></td><td id="5-6"></td><td id="5-7"></td><td id="5-8"></td></tr>
    <tr><td id="6-0"></td><td id="6-1"></td><td id="6-2"></td><td id="6-3"></td><td id="6-4"></td><td id="6-5"></td><td id="6-6"></td><td id="6-7"></td><td id="6-8"></td></tr>
    <tr><td id="7-0"></td><td id="7-1"></td><td id="7-2"></td><td id="7-3"></td><td id="7-4"></td><td id="7-5"></td><td id="7-6"></td><td id="7-7"></td><td id="7-8"></td></tr>
    <tr><td id="8-0"></td><td id="8-1"></td><td id="8-2"></td><td id="8-3"></td><td id="8-4"></td><td id="8-5"></td><td id="8-6"></td><td id="8-7"></td><td id="8-8"></td></tr>
</table>