javascript初心者です。
押されたキー毎にカウントをしたいのですが、
例)rを押した回数だけAの欄に、lを押した回数だけBの欄に0からカウントアップ
どのように設定すればいいのでしょうか?
テキストの書き換えも考えましたが、コードがかなり長くなってしまいそうで不安です。
(↓こちらのサイト様を参考にしております。
http://www.pori2.net/js/DOM/2.html)
何かヒントでもいただけないでしょうか?
よろしくお願いします。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するjavascript初心者です。
押されたキー毎にカウントをしたいのですが、
例)rを押した回数だけAの欄に、lを押した回数だけBの欄に0からカウントアップ
どのように設定すればいいのでしょうか?
テキストの書き換えも考えましたが、コードがかなり長くなってしまいそうで不安です。
(↓こちらのサイト様を参考にしております。
http://www.pori2.net/js/DOM/2.html)
何かヒントでもいただけないでしょうか?
よろしくお願いします。
既にご存知のことも多いかと思いますが、以下のコードで一通り説明させてください。
まず、「キーが押されたら何をする」というような「~が起きたら~をする」というパターンはイベントに関数を結びつけて記述します。これがdocument.body.onkeydown = function(){//略 };の部分です。これはonkeydown(キーが押されたときで、この時点ではどのキーか区別していない)が起こったらfunction(){}が呼び出されるという意味です。
keydownのようなイベントが起こると、イベントの詳細情報がfunction(){}に渡されて実行されます。ここではそのイベントの詳細情報をeventとして渡しています。
functionの中でどのキーが押されたかの判定をしています。'r'が押されたときにはevent.keyCodeが82, 'l'の時には76になるので、これで判別できます。いずれのキーでもないときには処理がなされません。
次にr, lがそれぞれ何回押されたかを表示するまでを説明します。count_right, count_leftとありますが、これがプログラム中でr, lがそれぞれ押された回数を保持しています。キーが押されるとこれらをインクリメントしているわけです。
r, lの押下回数を表示する部分は、htmlに用意してあって、document.getElementByIdによってr, lそれぞれのための入れ物を取得しています。count_right, count_leftが変更された後にここの値をtextContentをいじることによって変更しています。
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var count_right = 0;
var count_left = 0;
var right = document.getElementById('right');
var left = document.getElementById('left');
right.textContent = count_right;
left.textContent = count_left;
document.body.onkeydown = function(event){
console.log(event.keyCode);
if(event.keyCode == 82){
count_right++;
right.textContent = count_right;
}
if(event.keyCode == 76){
count_left++;
left.textContent = count_left;
}
};
};
</script>
</head>
<body>
<div>
rの回数:<span id="right"></span>
</div>
<div>
lの回数:<span id="left"></span>
</div>
</body>
</html>
ここで使った関数、は「keydown イベント」などとググれば出てくると思いますので、読んでみると使い方がより分かるかもしれません。また、jqueryを使っているのであれば、window.onloadやdocument.body.onkeydown, textContentなどの部分がもう少しすっきりかけるでしょう。
キーボードからの入力をDOMでハンドリングするには、keydown,keyup,keypress
といったKeyboardEvent系のイベントをキャッチする方法が一般的です。どのイベントがいいかは目的とする処理、および処理系(ブラウザ)の実装状況を鑑みて選択してください。
$elm.addEventListener('keypress', e => ...);
このとき、イベントハンドラに渡される第一引数はKeyboardEventオブジェクトで、このオブジェクトのプロパティからどのキーが押されたかを判別できます。たとえば
$elm.addEventListener('keypress', e => {
if (e.key === 'Enter') {
console.log('Enterキーがおされました');
}
});
この方法を応用すれば、どのキーが何回押されたかをカウントしていくことが可能です。表示方法については主旨から外れますが、表示用のDOMを用意しておいて、カウントアップされたら表示を更新していく、といった方法が簡単です。
以下、サンプルではページ内でキーが入力されたとき、それをカウントして、回数をキーごとに表示します。
const keyCount = {};
window.addEventListener('keypress', e => {
// キーごとに回数をカウント
keyCount[e.key] = (keyCount[e.key] || 0) + 1;
// 表示を更新
document.body.textContent = JSON.stringify(keyCount, null, 4);
});
body
{
white-space: pre;
}
press any key...