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

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  2. tweenmax_license01.jpg

    JavaScript

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

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

  3. obj_clear.jpg

    JavaScript

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

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

  4. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  5. tweenmax_js_totation.jpg

    JavaScript

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

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

  6. offset_style_data.jpg

    JavaScript

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

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

最近の記事

  1. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  2. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. LEGO Minecraft

    LEGO

    「LEGO Minecraft」商品化決定!
  2. oncomplete_function.jpg

    JavaScript

    【TweenMax】「onComplete」で引数を使う方法
  3. marsedit_fullsize_image0-2.jpg

    MarsEdit

    【MarsEdit】LightBox風プラグインで大きなサイズの画像を表示する方…
  4. itunes_card_camera-1.jpg

    Apple

    「iTunes Card」をカメラで読み込ませてみた。予想以上に高速でチャージで…
  5. 日常

    生活の質を
PAGE TOP