Warning: Parameter 1 to multibyte_patch::wplink_js() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579
JavaScript内で、HTMLのIDを直接指定したらダメ | Crunchlog
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/voidgraphics/www/crunchlog/wp-includes/plugin.php on line 579

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

    JavaScript

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

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

  2. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  3. fb022d1ac056d555673c17937de7f431.png

    JavaScript

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

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

  4. canvas.jpg

    JavaScript

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

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

  5. scope.jpg

    JavaScript

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

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

  6. tweenmax_license01.jpg

    JavaScript

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

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

最近の記事

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

アーカイブ

  1. about_debug-4.jpg

    JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方…
  2. fnm006-2.jpg

    MTG

    【MTG】またしても負け越しでもプロモゲットの4月FNM
  3. 日常

    『War of the worlds(宇宙戦争)』
  4. 20130327224056.jpg

    iPhone

    iPhoneにくる迷惑メールの個別撃退方法
  5. 日常

    オフライン
PAGE TOP