Навигация с помощью стрелок по контейнеру div-ов 3х3

Question

Нужна навигация с помощью стрелок по контейнеру div-ов 3х3 В данном коде пойнтер указывает на 4 стороны вокруг первого элемента, а должен указывать на один из 9 элементов и клик при нажатии клавиши ентер

   let pointer = document.createElement('div')

   pointer.className = 'tile'
   container.appendChild(pointer)
   console.log(pointer)
   pointer.style.display = 'none'
   pointer.classList.add('active')

   let newContainer = document.getElementsByClassName('container')[0]
   document.addEventListener('keydown', () => {

      pointer.style.display = 'block'

      pointer.tabIndex = 0;

      let rectElem = container.getBoundingClientRect();
      let x = rectElem.x + pageXOffset,
         y = rectElem.y + pageYOffset;

      if (event.code === 'ArrowRight') {
         x += pointer.offsetWidth;
      }
      if (event.code === 'ArrowLeft') {
         x -= pointer.offsetWidth;
      }
      if (event.code === 'ArrowUp') {
         y -= pointer.offsetHeight;
      }
      if (event.code === 'ArrowDown') {
         y += pointer.offsetHeight;
      }

      pointer.style.position = 'absolute';
      pointer.style.left = x + 'px';
      pointer.style.top = y + 'px';

   })

Answer 1

Поскольку у Вас уже есть элементы, то нет необходимости в дополнительном блоке pointer. Можно просто менять стили элемента с нужным индексом:

let tiles = [...document.querySelectorAll('#container div')];
let tileIndex = 0;

const toggleTile = (i) => tiles[i].classList.toggle('active');
const di = { ArrowLeft: 8, ArrowRight: 1, ArrowUp: 6, ArrowDown: 3 };

toggleTile(tileIndex);

document.addEventListener('keydown', () => {
  if (di.hasOwnProperty(event.key)) {
    toggleTile(tileIndex);
    tileIndex = (tileIndex + di[event.key]) % 9;
    toggleTile(tileIndex);
  }
});

#container {
  display: flex;
  flex-flow: row wrap;
  width: 165px;
}

#container div {
  flex: 1 1 30%;
  height: 55px;
  border: 1px solid black;
}

.active {
  background: blue;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

БЛОГ НА HUSL

Навигация с помощью стрелок по контейнеру div-ов 3х3

Ответы (1 шт):