需要一个带有计数器的按键按钮

Question

我正在开设一个互动投票台，我需要有按钮，但也可以用a，b，c等键触发。我有计数js，但我很难让按键工作。

这是

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;
}

#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;
}

<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>

js：

Answer 1

JS提供了可用于检测按键的keydown，keypress和keyup个事件。您可以将keypress事件处理程序附加到整个页面。

• MDN docs for KeyPress

例如：

document.onkeypress = function (keypressEvent) {
  if (keypressEvent.key === 'a') {
    add1a();
  } else if (keypressEvent.key === 'b') {
    add1b();
  }
};