39172633

need-a-keypress-button-with-a-counter

by Reid Horton

HTML

<button id="add1a"></button>

<h1 id="resulta">0</h1>

<button id="add1b"></button>

<h1 id="resultb">0</h1>

<button id="add1c"></button>

<h1 id="resultc">0</h1>

CSS

#add1a {
    background-image: url( 'http://i59.tinypic.com/fx428h.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

#add1b {
    background-image: url( 'http://i59.tinypic.com/fx428h.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

#add1c {
    background-image: url( 'http://i59.tinypic.com/fx428h.jpg' );
    background-size: 100px 130px;
    height: 134px;  
    width: 104px;
}

JavaScript

var totala = 0;

document.getElementById('add1a').onclick = add1a;

function add1a() {
  totala = totala + 1;
  document.getElementById('resulta').innerHTML = totala;
}

var totalb = 0;

document.getElementById('add1b').onclick = add1b;

function add1b() {
  totalb = totalb + 1;
  document.getElementById('resultb').innerHTML = totalb;
}

var totalc = 0;

document.getElementById('add1c').onclick = add1c;

function add1c() {
  totalc = totalc + 1;
  document.getElementById('resultc').innerHTML = totalc;
}

var KeyCodes = {
	a: 65,
  b: 66,
  c: 67
};

document.addEventListener("keydown", function (event) {
	switch (event.keyCode) {
  	case KeyCodes.a:
    	add1a();
    	break;
    case KeyCodes.b:
    	add1b();
    	break;
    case KeyCodes.c:
    	add1c();
    	break;
  }
});