Webアプリをデザインしていて、JavaScriptの記述について間違っていたのでメモ。すごい基本的なところでエラーがでてしまいました^^; 勉強をはじめたころは基本的なところがわかってなかったな〜。
状況としては、HTMLで「div」に「id」を設定し、「canvas」をつくりました。で、その「canvas」をタッチしたら次の処理を開始するようにしたかったのですが、以下のようにしたらエラーが出てしまいました。
これがHTML側。
そしてJavaScript。
タッチされたら、「canvastouch」を読み込むようになってます。
countdown.addEventListener("touchstart",canvastouch,false);
問題はJavaScript内で、HTMLのIDを直接指定したこと
一応これで動いていたんですが、
よくよく見たらエラーが出ていました。
なにがいけなかったかというと、
JavaScriptでの「countdown」の記述です。
改めてみてみます。
countdown.addEventListener("touchstart",canvastouch,false);
この部分です。直接IDを指定しちゃってますね。
これがよくなかった。HTMLにあるIDなので、JavaScriptでは一度、「getElementById」をしなければいけなかったのです。
解決策は「getElementById」で変数にいれちゃう
で、修正したJavaScriptは以下のようになります。
var touchevent = document.getElementById("countdown");
touchevent.addEventListener("touchstart",canvastouch,false);
1行目でHTMLからIDを引っ張ってきて「touchevent」に入れてます。
2行目でイベントを仕込んでます。
これでエラーはなくなりました。
勉強をはじめたころとはいえ
なんという初歩的エラー。。。。
こうしていろいろ学んでいくんです^^;
▼基本はこれがわかりやすい
