JavaScript

JavaScript内で、HTMLのIDを直接指定したらダメ

Webアプリをデザインしていて、JavaScriptの記述について間違っていたのでメモ。すごい基本的なところでエラーがでてしまいました^^; 勉強をはじめたころは基本的なところがわかってなかったな〜。

状況としては、HTMLで「div」に「id」を設定し、「canvas」をつくりました。で、その「canvas」をタッチしたら次の処理を開始するようにしたかったのですが、以下のようにしたらエラーが出てしまいました。

これがHTML側。

1
2
3
<div id="countdown" class="gamePanels">
<canvas id="cvs_countdown" width="360" height="468"></canvas>
</div>

そしてJavaScript。
タッチされたら、「canvastouch」を読み込むようになってます。

1
countdown.addEventListener("touchstart",canvastouch,false);

問題はJavaScript内で、HTMLのIDを直接指定したこと

一応これで動いていたんですが、
よくよく見たらエラーが出ていました。
なにがいけなかったかというと、
JavaScriptでの「countdown」の記述です。
改めてみてみます。

1
countdown.addEventListener("touchstart",canvastouch,false);

この部分です。直接IDを指定しちゃってますね。
これがよくなかった。HTMLにあるIDなので、JavaScriptでは一度、「getElementById」をしなければいけなかったのです。

解決策は「getElementById」で変数にいれちゃう

で、修正したJavaScriptは以下のようになります。

1
2
var touchevent = document.getElementById("countdown");
touchevent.addEventListener("touchstart",canvastouch,false);

1行目でHTMLからIDを引っ張ってきて「touchevent」に入れてます。
2行目でイベントを仕込んでます。

これでエラーはなくなりました。

勉強をはじめたころとはいえ
なんという初歩的エラー。。。。

こうしていろいろ学んでいくんです^^;

▼基本はこれがわかりやすい

関連記事

  1. scope.jpg

    JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

  2. offset_style.jpg

    JavaScript

    「offset」で取得した値を使い回す

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  3. js_comment.jpg

    JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  4. tweenmax_license01.jpg

    JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  5. js_global.jpg

    JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  6. offset_style_data.jpg

    JavaScript

    「offset」と「style」で取得する値が違う

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

アーカイブ

  1. 日常

    香港といえば
  2. iCloud_address.PNG

    サービス

    今さらだけどiCloudの「@me.com」アドレスを取ったぞ
  3. image_duplicate_as_jpeg.jpg

    Mac

    Macでアプリを使わずpngを一気にjpgに変換する方法
  4. 20140114233255.jpg

    HTML / CSS

    アプリ内webブラウザのエラーを解消
  5. 【コラージュ日記6】ピカソとクレーのアート展

    日常

    【コラージュ日記6】ピカソとクレーのアート展
PAGE TOP