Adding keypressing events

Question

I have a question. I have made a small site in HTML and vanilla JS to act as a counter. It is working fine, but I wanted to add a function that would allow the user to add or subtract 1 from the counter by pressing "+" or "-", in the numpad or not.

What is the easiest way to do this in vanilla JS?

Possible duplicate of [Simplest way to detect keypresses in javascript](http://stackoverflow.com/questions/16089421/simplest-way-to-detect-keypresses-in-javascript) — Dekel, Jan 17 '17 at 00:02

nixkuroi · Answer 1 · 2017-01-17T00:51:24.357

Sure, just attach to the keyup events and increment or decrement the value when the proper key is pressed.

var value = 0;


document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelector(".valueHolder").innerHTML = value;
  
 });

document.addEventListener("keyup", function(event) {
  
  if (event.which == "187" || event.which == "107") { // + key
    value++;
  }

  if (event.which == "189" || event.which == "109") { // - key
    value--;
  }

  
  document.querySelector(".valueHolder").innerHTML = value;
    
  
console.log(event.which);
});

<div class="valueHolder"></div>

score 0 · Answer 2 · answered Jan 17 '17 at 00:04

You will want to add an event listener on the document

document.addEventListener('keydown', myFunction);

function myFunction(e) {
    var keyCode = e.keyCode();
    ...
}

You'll want to look up the keycodes for the keys you will be using (+ and -) and compare that value to keyCode. Then use a conditional to execute your adding or subtracting.

score 0 · Answer 3 · answered Jan 17 '17 at 00:06

You would create an event handler, which would add or subtract from a global variable based on the key pressed, like this:

window.counter=0;

function key(ev){
  if(ev.keycode==107) window.counter++;
  if(ev.keycode==109) window.counter--;
}

document.onkeypress = key;

Adding keypressing events

3 Answers3