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>CodePudding user response：
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>