押されたキー毎に区別してカウント


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をいじることによって変更しています。

[code]

    <!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>
    
[/code]

ここで使った関数、は「keydown
イベント」などとググれば出てくると思いますので、読んでみると使い方がより分かるかもしれません。また、jqueryを使っているのであれば、window.onloadやdocument.body.onkeydown,
textContentなどの部分がもう少しすっきりかけるでしょう。




既にご存知のことも多いかと思いますが、以下のコードで一通り説明させてください。

まず、「キーが押されたら何をする」というような「～が起きたら～をする」というパターンはイベントに関数を結びつけて記述します。これが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をいじることによって変更しています。

[code]

    <!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>
    
[/code]

ここで使った関数、は「keydown
イベント」などとググれば出てくると思いますので、読んでみると使い方がより分かるかもしれません。また、jqueryを使っているのであれば、window.onloadやdocument.body.onkeydown,
textContentなどの部分がもう少しすっきりかけるでしょう。

