質問: ### 前提・実現したいこと 画像を3つ表示、ボタンを5つ表示して、 1つ目のボタン→1つの画像を左右に跳ね返り移動 **2→2つの画像をそれぞれ上下に跳ね返り移動、 3→3つの画像をそれぞれ好きな向きに跳ね返り移動** 4→リセット 5→タイマーストップ をしたいです。 1,4,5のボタンはできましたが、そのほかの 2,3のボタンが点滅表示や動かなかったりしてうまくできません。 助言をお願いいたします。 ### 発生している問題・エラーメッセージ ``` The key "initial" is not recognized and ignored. 284002IgarashiEri-kimatukadai2.html:5 The key "1" is not recognized and ignored. (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at :1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at :1:1 ・ ・ ・ (unknown) Uncaught ReferenceError: draw_kare is not defined at :1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at :1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at :1:1 ・ ・ ・ (unknown) Uncaught ReferenceError: draw_kare is not defined at :1:1 (unknown) Uncaught ReferenceError: draw_yasai2 is not defined at :1:1 ・ ・ ・ ``` ### 該当のソースコード ``` ``` プログラミング演習2 プログラミング演習2 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 ``` ``` ### 試したこと 大きさや秒数を変更すると、片方だけ動いたり全く動かなくなったりする。 yasai2が何度も何度もunknownになったあと1回kareがunknownになりまたyasai2が何度も繰り返しunknownになるようです。forなど使っていません。
回答: 大学の課題のようですので、助言だけします。 まずインデントがおかしいため、関数宣言の中で関数宣言している箇所があり、それのエラーが出ています。インデントは整形ツールなどである程度マシにできるので、使ってみてください。 【Online JavaScript beautifier】 setInterval/setTimeoutについては関数自体を渡すほうが良いです。 ``` // timer_id = window.setInterval("draw_hato1()",50); // ↓ timer_id = window.setInterval( draw_hato1, 50 ); ``` もしくは無名関数。 ``` // timer_id = window.setInterval("draw_hato1()",50); // ↓ timer_id = window.setInterval( function() { draw_hato1(); }, 50 ); ``` `onload` などは `addEventListener` で書き直すほうが良いと思いますが、イベント処理はまだ履修していないのでしょうか。 【EventTarget.addEventListener - Web API インターフェイス | MDN】 【JavaScriptでwindow.onloadの色々な書き方!!|By U Zensen.】