関数のイベント(e)がundefindになる

Question

前提・実現したいこと

function 関数名（e）の’（e）’の部分を取得できるようにしたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'target' of undefined

該当のソースコード

var file = document.getElementsByClassName('.sell-upload-drop-file');
var canvas = document.getElementById('c1');
var canvasWidth = 400;
var canvasHeight = 300;
var uploadImgSrc;

// Canvasの準備
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var ctx = canvas.getContext('2d');

function loadLocalImage(e) {
  // ファイル情報を取得
  var fileData = e.target.files[0];
  // FileReaderオブジェクトを使ってファイル読み込み
  var reader = new FileReader();
  // ファイル読み込みに成功したときの処理
  reader.onload = function() {
      // Canvas上に表示する
      uploadImgSrc = reader.result;
      canvasDraw();
  }
  // ファイル読み込みを実行
  reader.readAsDataURL(fileData);
}

// ファイルが指定された時にloadLocalImage()を実行
file.addEventListener('change', loadLocalImage(), false);

// Canvas上に画像を表示する
function canvasDraw(imgSrc) {
  // canvas内の要素をクリアする
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  // Canvas上に画像を表示
  var img = new Image();
  img.src = uploadImgSrc;
  img.onload = function() {
      ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width));

    // Canvas上にテキストを表示
    addText();

    // canvasを画像に変換
    var data = canvas.toDataURL();

    // 画像として出力
    var outputImg = document.createElement('img');
    outputImg.src = data;
    document.getElementById('result').appendChild(outputImg);
    }
  }
});

試したこと

console.log(e);で確認したところundefindが返ってきている

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

// ファイルが指定された時にloadLocalImage()を実行
file.addEventListener('change', loadLocalImage(), false);

ここでloadLocalImage()と書くと、この関数をその場で実行して結果だけaddEventListenerにわたす、という意味になってしまいます。

カッコ無しでloadLocalImageと、関数を引数にする形としてください。

Comments

[takagitoshinari]

ありがとうございます！勉強になりました。
（）を消すと"Uncaught TypeError: file.addEventListener is not a function"というエラーが出たのですがこのエラーは"この関数知らないよ？"と言われているのでしょうか？

[maisumakun]

そうですね、「var file = document.getElementsByClassName('.sell-upload-drop-file');」なので、fileは要素のリストになっています。

1つだけでいいならquerySelectorで取得するほうが手軽です。

[takagitoshinari]

自分で書いておいて申し訳ないのですが、"document.getElementsByClassName('.sell-upload-drop-file');"で書いてfileを要素のリストにすることによるメリットはあるのでしょうか？

[maisumakun]

同じクラスを持つ要素が複数個あった場合に、一括して取得できます。

[takagitoshinari]

なるほど。すごく勉強になりました！何度もご回答いただきありがとうございました！
querySelectorにするとエラーが解決しました！感謝します。

Answer 2

file.addEventListener('change', loadLocalImage(), false);
の、loadLocalImage()の()がいりません。

また、var file = document.getElementsByClassName('.sell-upload-drop-file');
で指定しているクラス名の、.も不要です。

Comments

[takagitoshinari]

ご教授ありがとうございます！助かりました。
もっと勉強します

Answer 3

var file = document.getElementsByClassName('.sell-upload-drop-file');

classNameからひっぱるなら先頭の「.」はいらないです
（よほど変なclass名をつけていなければ）

var file = document.getElementsByClassName('sell-upload-drop-file');
もしくは
var file = document.querySelectorAll('.sell-upload-drop-file');

ただしHTMLCollectionにもNodeListにもaddEventListerは実行できないので

• forで回して処理するか
• 0番目(もしくは任意)の要素だけ抽出して処理するか
• var file = document.querySelector('.sell-upload-drop-file')で1つだけ取り出すか

のいずれかで対応してください

Comments

[takagitoshinari]

具体的なご教授ありがとうございます！教えていただいた内容を理解できていないので一旦勉強してから書いてみたいと思います！感謝します！

[yambejp]

できれば該当するHTMLも表記してもらえるとより精度が高い回答ができると思います