Javascriptのイベントオブジェクトeについて

Question

前提・実現したいこと

只今Javascript基礎の勉強中で、参考にしているサンプルコードでは e で呼び出し可能であったイベントのオブジェクトがなぜか呼び出せないです。

ゆくゆくはHTML上のボタンをクリックしたらそのボタンのテキストを取り出すe.taget.textContentを呼び出したいです。

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

エラーメッセージ
Uncaught ReferenceError: e is not defined

該当のソースコード

const question = '4は？';
const answers = [
'1',
'2'
'3',
'4'
];

const $button = document.getElementsByTagName('button');
const correct = '4';

//クイズの問題文、選択を定義
const setupQuiz = () => {
document.getElementById('js-question').textContent = question;
let buttonIndex = 0;
while (buttonIndex < $button.length) {
$button[buttonIndex].textContent = answers[buttonIndex];

buttonIndex++;

}
}
setupQuiz();

const clickHandler = (e) => {
if (correct === e.target.textContent) {
window.alert('正解');
} else {
window.alert('不正解');
}
}
console.log(e);

$button[0].addEventListener('click', (e) => {
clickHandler();
})
$button[1].addEventListener('click', (e) => {
clickHandler();
})
$button[2].addEventListener('click', (e) => {
clickHandler();
})
$button[3].addEventListener('click', (e) => {
clickHandler();
})

Comments

[maisumakun]

> console.log(e);

どこに書いたのですか？

[taka211]

app.js
jsファイルです！
htmlの後ろに<script>タグで呼び出してます。

[maisumakun]

周辺のコードも書いていただけますか？

[taka211]

編集、追加しました。

Answer 1

clickHandlerにeを渡すか、直接clickHandlerを指定する形としましょう。

$button[0].addEventListener('click', (e) => {
clickHandler(e);
})
$button[1].addEventListener('click', clickHandler)

Comments

[taka211]

解決しました！
ありがとうございます

Answer 2

$button[0].addEventListener('click', (e) => {
  clickHandler();
})

eをclickHandler()に渡してください。

$button[0].addEventListener('click', (e) => {
  clickHandler(e);
})

Comments

[taka211]

解決しました！
ありがとうございます

Answer 3

コールバック関数に(e)を指定していないのでは？

Comments

[taka211]

解決しました！
ありがとうございます