意外と気付きにくいミス〜単数系と複数形〜 #JavaScript

「:」「;」「,」「.」はもちろんだが・・・

プログラミングをしていてよくやってしまうのが、上にあげたような細かいながらもよく使う物の"抜け"。

書き忘れですね。

あるべき場所にこれらが無いことで、一見ちゃんとしているように見えるプログラムも正しく動作しないわけです。

他にも、見えにくいところでは「」。
スペース。またはインデント（IT業界では主にこちらで呼ばれます）。
これらの抜けや、半角でなく全角で記述してしまった場合。

一部のエディターでプログラミングをしていると、全角のインデントを打ってしまった場合はわかりやすく表記してくれる場合があります。
僕も使っているAtomですと、点線の「○」で示してくれます。

で、本題。

先日JavaScriptを編集していてやってしまったミスです。
・・・・・これ、原因に気付くのに30分かかりました。まだまだですね。

何かと言うと、ある要素をクリックされたら黒くなる。
また他の部分をクリックされたらそっちが黒くなって、他は元に戻る・・・という、そこまで難しく無い処理でした。

それで、ミスったところ。

main.js

(function() {
  'use strict';
  var menuItems = document.getElementByClassName('menu_item');
  var i;
  for (i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', function(e) {
      e.preventDefault();
      var i;
      for (i = 0; i < menuItems.length; i++) {
        menuItems[i].className = 'menu_item';
      }
      this.className = 'menu_item active';
    });
  }
})();

以下は上の訂正版。

main.js

(function() {
  'use strict';
  var menuItems = document.getElementsByClassName('menu_item');
  var i;
  for (i = 0; i < menuItems.length; i++) {
    menuItems[i].addEventListener('click', function(e) {
      e.preventDefault();
      var i;
      for (i = 0; i < menuItems.length; i++) {
        menuItems[i].className = 'menu_item';
      }
      this.className = 'menu_item active';
    });
  }
})();

・・・わかります？

main.js

  var menuItems = document.getElementsByClassName('menu_item');
                                     ↑

ここ（矢印）です。
ここの「s」は訂正前にはありませんでした。

「getElementById('a')」で「id="a"」を当てている要素を取得します。
しかし、ここで取得したいのは"複数"の要素を含むclass。
であれば、英語的にも当然複数形になります。
「getElementByClassName」ではダメなわけです。
「getElementsByClassName」にしましょう。

~~これミスると、後から探すときに上で紹介していたような物よりも見つけにくいかもしれません。~~

・・・・・僕だけでした。

以下、コメントをいただいておりますが、デベロッパーツールからコンソールを開き、コンソール上で実行すると、おかしいところを炙り出してくれます。

皆様も「よくわからないけど、動かん！」ってなったらコンソールにてお試しください<(_ _)>