Javascriptの実行時に想定通りに動かず、エラーとなってしまうこと多いですよね…。
今回はそんなエラーとなってしまう原因の一つとして確認してもらいたいポイントを紹介します。
Amazonで無料でJavaScriptの本が読めるの知っていましたか？
これは読まない手はないです。
原因
結論から記述すると、変数名が原因の場合があります。
今回はonclickの場合で解説しますが、onchangeなどでも起きる場合があります。
JSでonclick(オンクリック)が動かない
さて、今回はonclickでJSを発火させようとした時に、動いてくれなかったと言う事で原因の特定をしました。
こんな感じのコードを実行していました。
<input class=content2 type=text id=hoge'.$l.' name=hoge'.$l.' onclick=fuga()>しかしこれだとonclickがうんともすんとも言わない…。
そこでnameを変更してみようと、取り敢えずnameを変更する為に_(アンダーバー)を付けてみました。
<input class=content2 type=text id=hoge'.$l.' name=hoge_'.$l.' onclick=fuga()>そうすると、あれだけ動かなかったコードが動きエラーが解消されました。
JSでonchange(オンチェンジ)が動かない
onclick同様でonchangeでも同じ事が言えます。
<input class=content2 type=text id=hoge'.$l.' name=hoge'.$l.' onchange=fuga()>この様になっていたコードを下記に変更します。
<input class=content2 type=text id=hoge'.$l.' name=hoge_'.$l.' onchange=fuga()>先程と同じようにnameの後ろに”＿”(アンダーバー)を付けて変更しました。
これで動くようになりました。
結論。ファクターは変数名
調べてみると、部品要素名のnameやidと、onclick属性等で呼び出す名前が重複している事が原因らしいです。
onclickやonchange自体が原因と言う訳ではなく、nameとidの名前は異なる名前を付ける事が重要でした。
まとめ
name名やid名を変更した後は、呼び出している関数名を変えることをお忘れなく。
