する質問をすることでしか得られない、回答やアドバイスがある。42JSで絵画機能を自由に複製できるようにしたいです。現在ajaxからテンプレートHTMLを読み込んで絵画のHTMLが存在していれば(canvasのタグがあれば)お絵かきができるようにしたいです。});});かなりコードを省略して申し訳ないです。フォームのデータ情報をjsonで読み込んでおり、それをループさせてタグのタイプがcanvasだったらそのキャンバスの設定をしたいです。現在このような形になっています。このままだと複数の設定ができないと思います。EventListenerはループの中で設定できるのか怪しいです。JSの経験がまだ浅いので皆様の助言をお待ちしておりますattachmentクリップ0気になる質問をクリップするクリップした質問は、後からいつでもマイページで確認できます。クリップした質問に回答があった際、通知やメールを受け取ることができます。自分も答えを知りたい質問者以外のユーザにも役立つ評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。質問の評価を上げたことを取り消します低評価-評価を下げられる数の上限に達しました評価を下げることができません1日5回まで評価を下げられます1日に1ユーザに対して2回まで評価を下げられます質問の評価を下げるteratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。コメントをしてください。送信する質問の評価を下げる機能の利用条件この機能を利用するためには、以下の事項を行う必要があります。件sort評価が高い順sort新着順sort古い順linkcheckベストアンサー+2脱初心者レベルの難しい話になります。理解するのが難しければJavaScriptで新しく変数を利用するときはvar(またはlet)を使うことだけ覚えてもらえればよいです。コードの修正点としてはループ中の変数をlet宣言に直すのと、draw_canvas()関数をループ中で定義するようにすればよいかと思います。質問文のコードが複数の<canvas>に対応できないのは、ループ中で使用している変数が「グローバル変数」になっているからであると考えられます。このままでは2回目以降の<canvas>タグで前回の値を上書きしてしまいます。JavaScriptでは新しく変数を使用する際にvarやletを用いて変数を宣言するとその変数は「ローカル変数」となり、変数の使用できる範囲を限定して使用することができます。MDN質問文のコードを下記のように書き換えることで、変数をローカル変数として使用し、ループによる上書きを回避できると思います。}←この括弧の中だけで使用できる変数を宣言しています。することによって、forループがループされるたびに新しい変数が生成されることになります。(forループ1回目の変数canvasとループ2回目の変数canvasは別物ということになります。}の中で定義する必要があります。}の中にしか存在しないからです。関数の中から外へ参照する変数は、関数を定義した時点でのローカル変数になるので、変数canvasはちゃんとループごとの変数になってくれます。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。10:24丁寧にご説明いただきありがとうございます!ループ中にvarやletで定義したものは別物になるとは初めて知りました。おかげ様で複数のcanvasを設定できるようになりました。ループ中にvarやletで定義したものは別物になるとは初めて知りました。おかげ様で複数のcanvasを設定できるようになりました。13:34勉強になってもらえたようでよかったです。}では別物にはならないので、1つの変数をループのたびに上書きすることになってしまいます。似てるようで違うので、詳しくは調べてみるとよいでしょう。勉強になってもらえたようでよかったです。}では別物にはならないので、1つの変数をループのたびに上書きすることになってしまいます。似てるようで違うので、詳しくは調べてみるとよいでしょう。13:48補足の補足失礼します...。letはvarの代わりになりますが、varをletの代わりにするのはちょっと手間がかかります。古いIEを動作対象外にするのであればvarは使わずすべてletにするのがよいかと思います。https://caniuse.com/#feat=let補足の補足失礼します...。letはvarの代わりになりますが、varをletの代わりにするのはちょっと手間がかかります。古いIEを動作対象外にするのであればvarは使わずすべてletにするのがよいかと思います。頂いたご意見への回答は行っておりません。