Submit/Change multiple innerHTML on hover color, with keycodes

Admin 1
Viewed 84

So, When I press the arrow keys on the keyboard (left, right, up, down) the green hover color goes to the corresponding button.

What I want to do, is every time I press the "return" or "enter" key (keycode 13), to write the corresponding number on the screen.

For example, if the green hover color is 2 and I prees the "Return/Enter" key, write "Two" on the screen. I want the same thing to happen with the mouse. For example, if I click on 2 , write "Two" on the screen.

How can I achieve this? And of course a better coding in all of this is always welcome.. Thanks a lot!!!

var columns = 0;
var rowButtons = 0;

var $rows = $('.multiple');
var buttonSelected;
var arrows = { left: 37, up: 38, right: 39, down: 40, enter: 13 };



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

    case arrows.right:
    $buttonsInRow = $('.multiple:eq(' + rowButtons + ') button');
    columns = columns == $buttonsInRow.length - 1 ? 0 : columns + 1;
    break;
   
    case arrows.enter:
    rowButtons = rowButtons == $rows.click;
    document.getElementById("screen").innerHTML ="one"
    break;
    
   }
    buttonSelected = $('.multiple:eq(' + rowButtons + ') button:eq(' + columns + ')');
    buttonSelected.addClass('selected');
  }

});
#screen {
  width:100%;
  padding:20px;
  background: #222;
  color:lime;
}

button.selected {
  background: green
}

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

.multiple button:hover {
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <button id="screen">--</button>

<div class="multiple">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="multiple">
  <button>4</button>
  <button>5</button>
  <button>6</button>
</div>
<div class="multiple">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

css html jquery javascript
1 Answers

For arrow keys: Since you have the columns and rowButtons variables, you can calculate what number you are currently hovering over. Each row constitutes moving three columns over. So if we had rowButtons = 1 then are column position would be at 4 (which is the start of the second row). Therefore, if we want to know how numbers we move over, we can do rowButtons * 3 to calculate that portion. This then leaves columns: each time columns goes up by 1, the number also moves up by one (number being the position on our keypad). So we can add columns onto rowButtons * 3 to get the number value, but since columns is zero-based (the column that starts with 1 means columns = 0) we need to add one to get the precise value, so we get:

rowButtons * 3 + columns + 1

So we now have calculated the number, but since it seems like you wanted the string value, we can add an object to our javascript where each key is a mapping from the number to the string (aka 2: "two").

Since you also mentioned that you would like to be able to click on the keypad, we can add a button listener for all the buttons that when clicked uses the same object map to give us strings. I will say that that listener assumes all of the buttons on the page are the keypad buttons, so you may want to add an identifier like a class to ensure that there aren't any problems. I didn't change any of the HTML or CSS, but here's a quick example:

var columns = 0;

var rowButtons = 0;

var $rows = $('.multiple');
var buttonSelected;
var arrows = {
  left: 37,
  up: 38,
  right: 39,
  down: 40,
  enter: 13
};

var tableValues = {
  1: "one",
  2: "two",
  3: "three",
  4: "four",
  5: "five",
  6: "six",
  7: "seven",
  8: "eight",
  9: "nine"
};

$(window).keydown(function(e) {

  if (Object.values(arrows).indexOf(e.which) > -1) {
    e.preventDefault();
    $('.multiple button').removeClass('selected');

    switch (e.which) {
      case arrows.up:
        rowButtons = rowButtons == 0 ? $rows.length - 1 : rowButtons - 1;
        break;

      case arrows.down:
        rowButtons = rowButtons == $rows.length - 1 ? 0 : rowButtons + 1;
        break;

      case arrows.left:
        $buttonsInRow = $('.multiple:eq(' + rowButtons + ') button');
        columns = columns == 0 ? $buttonsInRow.length - 1 : columns - 1;
        break;

      case arrows.right:
        $buttonsInRow = $('.multiple:eq(' + rowButtons + ') button');
        columns = columns == $buttonsInRow.length - 1 ? 0 : columns + 1;
        break;

      case arrows.enter:
        // find the column and row position:
        var pos = (rowButtons * 3) + columns + 1;
        console.log(pos);
        rowButtons = rowButtons == $rows.click;
        document.getElementById("screen").innerHTML = tableValues[pos];
        break;

    }
    buttonSelected = $('.multiple:eq(' + rowButtons + ') button:eq(' + columns + ')');
    buttonSelected.addClass('selected');
  }

});

$("button").click(function() {
  let pos = $(this).text();

  document.getElementById("screen").innerHTML = tableValues[pos];
});
#screen {
  width: 100%;
  padding: 20px;
  background: #222;
  color: lime;
}

button.selected {
  background: green
}

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

.multiple button:hover {
  background-color: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="screen">--</button>

<div class="multiple">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>
<div class="multiple">
  <button>4</button>
  <button>5</button>
  <button>6</button>
</div>
<div class="multiple">
  <button>7</button>
  <button>8</button>
  <button>9</button>
</div>

user_169985230
Related