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

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 事件，可用于检测按键。您可以将按键事件处理程序附加到整个页面。

MDN docs for KeyPress

例如：

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

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

Need a keypress button with a counter

javascript

counter

keypress

button