2016-08-26 3 views
1

Я работаю над интерактивным кабинетом для голосования, и мне нужно иметь кнопки, которые подсчитываются, но также могут запускаться клавишами a, b, c и т. Д. У меня подсчет вычислений, но мне тяжело заставить клавиатуру работать.Нужно нажать кнопку с прилавком

Вот

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>

в ЯШ:

+0

Не могли бы вы добавить свой попытаться добавить 'keypress'? –

ответ

0

JS обеспечивает keydown, keypress и keyup события, которые вы можете использовать для обнаружения нажатий клавиш. Вы можете прикрепить обработчик события нажатия клавиши на всю страницу.

Например:

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

Это сработало отлично, спасибо огромное! –

+0

Еще одна вещь. С помощью этого способа анимация кнопок CSS не появляется, когда нажата клавиша, только когда я нажимаю. Есть ли простой способ оживить нажатие клавиши? –

Смежные вопросы