[FIXED] How to select different boxes with key UP/DOWN/RIGHT/LEFT?

Issue

This code snipets shows 3x3 matrix where I can hover and select boxes. I want to move around with keys and select some box with ENTER. How can I do that?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
   .box{
   background-color:rgb(100,12,120);
   height: 100px;
   width:100px;
   transition: transform .6s;
   }
   .box:hover{
   transform: scale(1.1);
   background-color:rgb(200,150,120);
   }
   .active {
   background-color: rgb(100,150,255);
   color: white;
   }
</style>
<div class="container m-5" id="myDIV">
   <div class="d-flex justify-content-around m-3">
      <div class="box "></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
   <div class="d-flex justify-content-around m-3">
      <div class="box"></div>
      <div class="box active"></div>
      <div class="box"></div>
   </div>
   <div class="d-flex justify-content-around m-3">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
   </div>
</div>
<script>
   // Get the container element
   var btnContainer = document.getElementById("myDIV");
   
   // Get all buttons with class="btn" inside the container
   var btns = btnContainer.getElementsByClassName("box");
   
   // Loop through the buttons and add the active class to the current/clicked button
   for (var i = 0; i < btns.length; i++) {
     btns[i].addEventListener("click", function() {
       var current = document.getElementsByClassName("active");
       current[0].className = current[0].className.replace(" active", "");
       this.className += " active";
     });
   }
</script>

Solution

WARNING: You can go to the next row if you are at the end of a row, and you click ArrowRight. Same for ArrowLeft, start of row and you go to the previous one.

Full demo

// Get the container element
var btnContainer = document.getElementById("myDIV");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("box");

// Loop through the buttons and add the active class to the current/clicked button
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].classList.remove("active");
    this.classList.add("active");
  });
}

// On arrow click
onkeydown = event => {
  var activeNumber, originalActiveNumber;
  // Get the active button index
  for (var i = 0; i < btns.length; i++) {
    if (btns[i].classList.contains("active")) {
      originalActiveNumber = activeNumber = i;
      break;
    }
  }
  switch (event.key) {
    case "ArrowUp":
      activeNumber -= document.querySelectorAll("#myDIV > div").length;
      break;
    case "ArrowDown":
      activeNumber += document.querySelectorAll("#myDIV > div").length;
      break;
    case "ArrowLeft":
      activeNumber--;
      break;
    case "ArrowRight":
      activeNumber++;
      break;
  }
  if (activeNumber >= 0 && activeNumber < btns.length) {
    btns[originalActiveNumber].classList.remove("active");
    btns[activeNumber].classList.add("active");
    return true;
  }
  else {
    return false;
  }
}

.box {
  background-color: rgb(100, 12, 120);
  height: 100px;
  width: 100px;
  transition: transform .6s;
}

.box:hover {
  transform: scale(1.1);
  background-color: rgb(200, 150, 120);
}

.active {
  background-color: rgb(100, 150, 255);
  color: white;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<div class="container m-5" id="myDIV">
  <div class="d-flex justify-content-around m-3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="d-flex justify-content-around m-3">
    <div class="box"></div>
    <div class="box active"></div>
    <div class="box"></div>
  </div>
  <div class="d-flex justify-content-around m-3">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Answered By - Plantt

Answer Checked By - Marie Seifert (PHPFixing Admin)