Javascript counter on key input instead of button?

Question

So I have this counter that increments 'positive' and 'negative' values, it's working fine. Now I also want to assign keyboard key to increment the values, 'f' for negative and 'j' for positive. How do I do this? I have been fiddling with onkeypress/onkeyup but it is still confusing.

<html>
<head>
<script type="text/javascript">

function modify_qty(val) {
var qty = document.getElementById('qty').value;
var new_qty = parseInt(qty,10) + val;

if (new_qty < 0) {
    new_qty = 0;
}

document.getElementById('qty').value = new_qty;
return new_qty;
}

function modify_qtyn(val) {
var qtyn = document.getElementById('qtyn').value;
var new_qtyn = parseInt(qtyn,10) + val;

if (new_qtyn < 0) {
    new_qtyn = 0;
}

document.getElementById('qtyn').value = new_qtyn;
return new_qtyn;
}

</script>
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body>

<div class="box">    
    <label for="Positive"><abbr title="Positive">Qty</abbr></label>
    <label for="Negative"><abbr title="Negative">Qtyn</abbr></label>
    <input id="qtyn" value="0" />
    <input id="qty" value="0" />
    <button id="down" onclick="modify_qtyn(1)">MINUS</button>
    <button id="up" onclick="modify_qty(1)">PLUS</button>


</div>

</body>
</html>

I found the solution by adding this:

function code(e) {
e = e || window.event;
return(e.keyCode || e.which);
}
window.onload = function(){
document.onkeypress = function(e){
    var key = code(e);
    if (key==102) {modify_qtyn(1);}
    if (key==70) {modify_qtyn(1);}
    if (key==106) {modify_qty(1);}
    if (key==74) {modify_qty(1);}
   };
};

you want to trigger function `modify_qtyn` when keyboard key is pressed ? — Rostyslav Kuzmovych, Jul 09 '17 at 16:50
Possible duplicate of [Simplest way to detect keypresses in javascript](https://stackoverflow.com/questions/16089421/simplest-way-to-detect-keypresses-in-javascript) — Dekel, Jul 09 '17 at 16:51

score 1 · Answer 1 · answered Jul 09 '17 at 16:54

You can use the event keypress in the tag <body> or even in the window. Check the documentation of this event.

<body onkeypress="func(event)">

or

window.addEventListener('keypress', func);

sor in this func you read the event.key passed as the first parameter to verify if is letter "f" or "j".

score 0 · Answer 2 · answered Jul 09 '17 at 17:01

method 1: addEventListener to body-

document.addEventListener('keypress', function(e){
  console.log(e.which) 
  if(e.which==70){ // 102
     modify_qtyn(1);
   }else if(e.which == 74){ // 106
     modify_qtyn(-1);
   }
});

method 2: input type to number to use arrow key

<input id="qtyn" value="0" type="number"/>

score 0 · Answer 3 · answered Jul 09 '17 at 19:30

I found the solution by adding this:

function code(e) {
e = e || window.event;
return(e.keyCode || e.which);
}
window.onload = function(){
document.onkeypress = function(e){
    var key = code(e);
    if (key==102) {modify_qtyn(1);}
    if (key==70) {modify_qtyn(1);}
    if (key==106) {modify_qty(1);}
    if (key==74) {modify_qty(1);}
   };
};

Javascript counter on key input instead of button?

3 Answers3