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. tweenmax_js_totation.jpg

    JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

  3. canvas.jpg

    JavaScript

    WebアプリでCanvasを使うための指定方法

    Webアプリをデザインするときのお決まりになりつつあるHTML5の…

  4. css_sprite.jpg
  5. fb022d1ac056d555673c17937de7f431.png

    JavaScript

    強力なアニメーション用のJavaScriptライブラリー「TweenMax.js」が便利!

    jQueryでもアニメーションはできるのですが、それよりも表現力豊…

  6. js_global.jpg

    JavaScript

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

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

最近の記事

  1. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  2. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  3. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  4. 【コレクション】カードダス:SDガンダム外伝シリーズ
  5. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  7. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  8. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  9. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  10. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」

アーカイブ

  1. 祝「GR」10周年!「GR 10th Anniversary “10th GReeting”」

    イベント

    祝「GR」10周年! 記念イベント「GR 10th Anniversary “1…
  2. 日常

    思考ゲーム
  3. 日常

    2008年、FULLCOUNT福袋
  4. 日常

    撮影
  5. 日常

    ようやく納品
PAGE TOP