1. BRSF

    Posted

    BRSF
Changes in title
+Cannot read property 'toLowerCase' of undefinedって何だ?
Changes in tags
Changes in body
Source | HTML | Preview

javascriptやjQueryなどの関連のライブラリをコーディングしていると頻繁に遭遇するエラーメッセージ。

Cannot read property 'toLowerCase' of undefined

これって何ぞや?日本語で直訳すると

toLowerCase"のプロパティが定義されていません

という意味になる。ではtoLowerCaseとは何か?答えはDOM要素に対する子要素(toLowerとは低階層のこと)のことで、それが定義されていないときに起こる。

どういうときに発生するか?

たとえば、このようなときに起こる。まずはサンプル1にあるような、プルダウンメニューから選択した値を取得するだけの、簡単なプログラムを記述してみる。

/*サンプル1*/
$('select').on(change,function(){
    val = $(this).find('option:selected').val();
    console.log(val);
})

このイベント部分を、サンプル2のように関数化させる。

/*サンプル2*/
$('select').on(change,function(){
    myFunc();
})

myFunc = function(){
   val = $(this).find('option:selected').val();
   console.log(val);
}

このとき、$(this)が何を指しているのかわからないので、上記のエラーが起きる。特に、関数を外部ファイル化しようとしたときに、そのままコピペなんてことをしてしまうと、このエラーに遭遇する率が高い。

この場合は、DOMオブジェクトも関数の引数に入れないといけない。

/*サンプル3*/
$('select').on(change,function(){
  sel = $(this);
    myFunc(sel);
})

myFunc = function(sel){
   val = sel.find('option:selected').val();
   console.log(val);
}

これは一部の例だが、このように、このエラーが出たら、まずは、とりわけ自分で定義した関数を見直してみるのをオススメする。なお、ブラウザの開発ツールなどで、エラー元を辿っても、複雑なjQueryのソース上に飛ばされてしまい、余計に混乱するだけである。