Блог

Итак, у меня есть доска судоку, созданная с использованием таблицы с 9 и 81, каждая из которых имеет идентификатор своего индекса в 2d-массиве как id =»y-x».

 <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>
  

Моя проблема в следующем: используя ванильный javascript, как мне определить щелчок по каждому, а затем ожидать ввода с клавиатуры или мыши (с цифрами на экране) и добавить это к innerHTML без 81 строки кода и, возможно, больше для функций?

Один из способов — добавить прослушиватель событий только в саму таблицу.

События предоставляют объект события в обратном вызове обработчика. Для пользовательских событий есть 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>