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. JavaScript

    JavaScriptでグローバル変数の使いどころを見直してパフォーマンスを改善する

    JavaScriptのコードの中では、どこにデータを格納するかでコ…

  2. JavaScript

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

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

  3. JavaScript

    配列に入れた無名オブジェクトの値をクリアする

    オブジェクトの値を配列にいれて管理することってけっこうあります。…

  4. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  5. JavaScript

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

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

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    グッドデザインエキスポ2009
  2. 日常

    続く納品
  3. 展覧会

    グッドデザインばかりが集められた「GOOD DESIGN EXHIBITION …
  4. 読書

    【絵本】じつはシリーズ化していた『どろんこハリー』
  5. 日常

    ひとしごと
PAGE TOP