質問: -1; canvas.addEventListener('mousemove', draw_canvas); 略 }); }); ``` かなりコードを省略して申し訳ないです。フォームのデータ情報をjsonで読み込んでおり、それをループさせてタグのタイプがcanvasだったらそのキャンバスの設定をしたいです。 現在このような形になっています。恐らくこのままだと複数の設定ができないと思います。また、EventListenerはループの中で設定できるのか怪しいです。 JSの経験がまだ浅いので皆様の助言をお待ちしております
回答: 脱初心者レベルの難しい話になります。 もし理解するのが難しければ**JavaScriptで新しく変数を利用するときは`var`(または`let`)を使う**ことだけ覚えてもらえればよいです。 コードの修正点としては**ループ中の変数を`let`宣言に直す**のと、**`draw_canvas()`関数をループ中で定義する**ようにすればよいかと思います。 質問文のコードが複数の``に対応できないのは、ループ中で使用している変数が「グローバル変数」になっているからであると考えられます。このままでは2回目以降の``タグで前回の値を上書きしてしまいます。 JavaScriptでは新しく変数を使用する際に`var`や`let`を用いて変数を宣言するとその変数は「ローカル変数」となり、変数の使用できる範囲を限定して使用することができます。 文法とデータ型 - JavaScript | MDN 質問文のコードを下記のように書き換えることで、変数をローカル変数として使用し、ループによる上書きを回避できると思います。 ``` let canvas = document.getElementById("canvasタグのid"); let ctx = canvas.getContext('2d'); let undoImages = []; let pointer = -1; ``` ここで用いた`let`というのは、`for`ループなどに用いる`{ }`←この括弧の中だけで使用できる変数を宣言しています。こうすることによって、`for`ループがループされるたびに新しい変数が生成されることになります。 (`for`ループ1回目の変数`canvas`とループ2回目の変数`canvas`は別物ということになります。) 注意点として、`addEventListener()`について、引数に与える関数`draw_canvas()`は`for`ループの`{ }`の中で定義する必要があります。なぜなら変数`canvas`は`{ }`の中にしか存在しないからです。 また、関数の中から外へ参照する変数は、関数を定義した時点でのローカル変数になるので、変数`canvas`はちゃんとループごとの変数になってくれます。