1. takaram
Changes in body
Source | HTML | Preview
@@ -1,55 +1,50 @@
javascriptやjQueryなどの関連のライブラリをコーディングしていると頻繁に遭遇するエラーメッセージ。
**Cannot read property 'toLowerCase' of undefined**
これって何ぞや?日本語で直訳すると
-**toLowerCase"のプロパティが定義されていません**
+**"toLowerCase"のプロパティが定義されていません**
という意味になる。ではtoLowerCaseとは何か?答えは**DOM要素に対する子要素**(toLowerとは低階層のこと)のことで、それが定義されていないときに起こる。
#どういうときに発生するか?
たとえば、このようなときに起こる。まずはサンプル1にあるような、プルダウンメニューから選択した値を取得するだけの、簡単なプログラムを記述してみる。
-```jQuery
-/*サンプル1*/
+```javascript:サンプル1
$('select').on(change,function(){
val = $(this).find('option:selected').val();
console.log(val);
})
```
このイベント部分を、サンプル2のように関数化させる。
-```
-/*サンプル2*/
+```javascript:サンプル2
$('select').on(change,function(){
myFunc();
})
myFunc = function(){
val = $(this).find('option:selected').val();
console.log(val);
}
```
このとき、$(this)が何を指しているのかわからないので、上記のエラーが起きる。特に、関数を外部ファイル化しようとしたときに、そのままコピペなんてことをしてしまうと、このエラーに遭遇する率が高い。
この場合は、DOMオブジェクトも関数の引数に入れないといけない。
-```
-/*サンプル3*/
+```javascript:サンプル3
$('select').on(change,function(){
-  sel = $(this);
+ sel = $(this);
myFunc(sel);
})
myFunc = function(sel){
val = sel.find('option:selected').val();
console.log(val);
}
```
これは一部の例だが、このように、このエラーが出たら、まずは、とりわけ自分で定義した関数を見直してみるのをオススメする。なお、ブラウザの開発ツールなどで、エラー元を辿っても、複雑なjQueryのソース上に飛ばされてしまい、余計に混乱するだけである。
-
-