2016-08-26 6 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>

はJSです:

+0

あなたは 'keypress'を追加するには、あなたの試みを追加してもらえますか? –

答えて

0

JSを使用すると、キー押下を検出するために使用することができます​​、keypress、およびkeyupイベントを提供します。 keypressイベントハンドラをページ全体にアタッチすることができます。例えば

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

これは完璧に働きました、ありがとうございました! –

+0

もう1つ。このように設定すると、キーを押すと、クリックするとCSSボタンのアニメーションが表示されません。キープレスでアニメーションを作成する簡単な方法はありますか? –

関連する問題