1. BRSF

    Posted

    BRSF
Changes in title
+Cannot read property 'toLowerCase' of undefinedって何だ?
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,55 @@
+javascriptやjQueryなどの関連のライブラリをコーディングしていると頻繁に遭遇するエラーメッセージ。
+
+**Cannot read property 'toLowerCase' of undefined**
+
+これって何ぞや?日本語で直訳すると
+
+**toLowerCase"のプロパティが定義されていません**
+
+という意味になる。ではtoLowerCaseとは何か?答えは**DOM要素に対する子要素**(toLowerとは低階層のこと)のことで、それが定義されていないときに起こる。
+
+#どういうときに発生するか?
+たとえば、このようなときに起こる。まずはサンプル1にあるような、プルダウンメニューから選択した値を取得するだけの、簡単なプログラムを記述してみる。
+
+```jQuery
+/*サンプル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のソース上に飛ばされてしまい、余計に混乱するだけである。
+
+