Keycodes / Move Up, Down, Left, Right on buttons group

Admin 1
Viewed 506

I try to move the green hover color on the buttons, with the four arrow keys on the keyboard. The thing is that it does not move normally. What I want is the following:

  1. pressing right, the green color goes to the right.
  2. pressing left, the green color goes to the left.
  3. Press up or down, the green color also goes to the middle row (Four-Five-Six) without removing the from the HTML.

I want the green color to go in all directions depending on the button I press. eg if it is at 1 and press down, go to 4. If it is at 1 and press right to go to 2. If it is at 2 and press left, go to 1 etc

The keycodes are: Left:37, Right:39, Up:38, Down:40

How can it be done? Thanks a lot!!!

var button = $('button');
var buttonSelected;
$(window).keydown(function(e) {
  if (e.which === 40) {
    if (buttonSelected) {
      buttonSelected.removeClass('selected');
      next = buttonSelected.next();
      if (next.length > 0) {
        buttonSelected = next.addClass('selected');
      } else {
        buttonSelected = button.eq(0).addClass('selected');
      }
    } else {
      buttonSelected = button.eq(0).addClass('selected');
    }

  } else if (e.which === 38) {
    if (buttonSelected) {
      buttonSelected.removeClass('selected');
      next = buttonSelected.prev();
      if (next.length > 0) {
        buttonSelected = next.addClass('selected');
      } else {
        buttonSelected = button.last().addClass('selected');
      }
    } else {
      buttonSelected = button.last().addClass('selected');
    }
  }
});
button.selected {
  background: green
}

.all button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
}

.all button:hover {
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<div class="all">
  <button>Four</button>
  <button>Five</button>
  <button>Six</button>
</div>
<div class="all">
  <button>Seven</button>
  <button>Eight</button>
  <button>Nine</button>
</div>

css html jquery javascript
2 Answers

This is my personal solution. I have conceptually divided everything into rows and columns.

var indexCol = 0;
var indexRow = 0;

var $rows = $('.all');
var buttonSelected;
var arrow = { left: 37, up: 38, right: 39, down: 40 };



$(window).keydown(function(e) {
  
  if (Object.values(arrow).indexOf(e.which) > -1) {
    e.preventDefault();
    $('.all button').removeClass('selected');
  
    switch (e.which) {
      case arrow.up:
        indexRow = indexRow == 0 ? $rows.length - 1 : indexRow - 1;
        break;
        
      case arrow.down:
        indexRow = indexRow == $rows.length - 1 ? 0 : indexRow + 1;
        break;
        
      case arrow.left:
        $buttonsInRow = $('.all:eq(' + indexRow + ') button');
        indexCol = indexCol == 0 ? $buttonsInRow.length - 1 : indexCol - 1;
        
        break;

      case arrow.right:
        $buttonsInRow = $('.all:eq(' + indexRow + ') button');
        indexCol = indexCol == $buttonsInRow.length - 1 ? 0 : indexCol + 1;
        
        break;
    }
  
    buttonSelected = $('.all:eq(' + indexRow + ') button:eq(' + indexCol + ')');
    buttonSelected.addClass('selected');
  }

});
button.selected {
  background: green
}

.all button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
}

.all button:hover {
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<div class="all">
  <button>Four</button>
  <button>Five</button>
  <button>Six</button>
</div>
<div class="all">
  <button>Seven</button>
  <button>Eight</button>
  <button>Nine</button>
</div>

user_40310830

This can be done by assuming a grid as follows:

1 2 3
4 5 6
7 8 9

Let's pick 5 as the starting point.

  • To go up, you subtract 3
  • To go down, you add 3
  • To go left, you subtract 1
  • To go right, you add 1

We also have to handle out of range cases:

  • When you are less than or equal to 0, you add 9
  • When you are greater than 9, you subtract 9

The following is a working code for the same:

$(window).keydown(function(e) {
  // remove the old active
  let buttonSelected = document.querySelector(".selected");
  buttonSelected.classList.remove("selected");

  let buttonId = parseInt(buttonSelected.id[2]);
  var newId = 0;

  if (e.which === 40) {
    // go down
    console.log(40, "down");
    newId = buttonId + 3;
  } else if (e.which === 38) {
    // go up
    console.log(38, "up");
    newId = buttonId - 3;
  } else if (e.which == 37) {
    // go left
    console.log(37, "left");
    newId = buttonId - 1;
  } else if (e.which === 39) {
    // go right
    console.log(39, "right");
    newId = buttonId + 1;
  }

  // adjust when out of range
  if (newId <= 0) {
    newId = newId + 9;
  }
  if (newId > 9) {
    newId = newId - 9;
  }

  // set the next active
  let nextItem = "#b-" + newId.toString();
  let newSelected = document.querySelector(nextItem);
  newSelected.classList.add("selected");
});
button.selected {
  background: green;
}

.all button {
  border: 1px solid blue;
  color: #222;
  padding: 10px 25px;
  cursor: pointer;
}

.all button:hover {
  background-color: orange;
}
<body>
  <div class="all">
    <button id="b-1" class="selected">One</button>
    <button id="b-2">Two</button>
    <button id="b-3">Three</button>
  </div>
  <div class="all">
    <button id="b-4">Four</button>
    <button id="b-5">Five</button>
    <button id="b-6">Six</button>
  </div>
  <div class="all">
    <button id="b-7">Seven</button>
    <button id="b-8">Eight</button>
    <button id="b-9">Nine</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

user_28523490
Related