33046


javascript初心者です。  
押されたキー毎にカウントをしたいのですが、

例）rを押した回数だけAの欄に、lを押した回数だけBの欄に0からカウントアップ

どのように設定すればいいのでしょうか？

テキストの書き換えも考えましたが、コードがかなり長くなってしまいそうで不安です。  
（↓こちらのサイト様を参考にしております。  
<http://www.pori2.net/js/DOM/2.html>）

何かヒントでもいただけないでしょうか？  
よろしくお願いします。


CC BY-SA 3.0
2017-03-02T11:35:25.793
33042
2017-03-02T13:39:16.647
20899
question
javascript
押されたキー毎に区別してカウント


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

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


CC BY-SA 3.0
2017-03-02T13:35:16.053
33046
2017-03-02T13:35:16.053
20903
33042
answer


キーボードからの入力をDOMでハンドリングするには、`keydown,keyup,keypress`といったKeyboardEvent系のイベントをキャッチする方法が一般的です。どのイベントがいいかは目的とする処理、および処理系（ブラウザ）の実装状況を鑑みて選択してください。

[code]

    $elm.addEventListener('keypress', e => ...);
    
[/code]

このとき、イベントハンドラに渡される第一引数は[KeyboardEvent](https://developer.mozilla.org/en-
US/docs/Web/API/KeyboardEvent)オブジェクトで、このオブジェクトのプロパティからどのキーが押されたかを判別できます。たとえば

[code]

    $elm.addEventListener('keypress', e => {
        if (e.key === 'Enter') {
            console.log('Enterキーがおされました');
        }
    });
    
[/code]

この方法を応用すれば、どのキーが何回押されたかをカウントしていくことが可能です。表示方法については主旨から外れますが、表示用のDOMを用意しておいて、カウントアップされたら表示を更新していく、といった方法が簡単です。

以下、サンプルではページ内でキーが入力されたとき、それをカウントして、回数をキーごとに表示します。

[code]

    const keyCount = {};
    
    window.addEventListener('keypress', e => {
        // キーごとに回数をカウント
        keyCount[e.key] = (keyCount[e.key] || 0) + 1;
        
        // 表示を更新
        document.body.textContent = JSON.stringify(keyCount, null, 4);
    });
[/code]

[code]

    body
    {
        white-space: pre;
    }
[/code]

[code]

    press any key...
[/code]


CC BY-SA 3.0
2017-03-02T13:39:16.647
33047
2017-03-02T13:39:16.647
33042
answer