Javascriptで正しく正誤判定がされない。

Question

前提・実現したいこと

Javasceiptの簡易クイズアプリを完成させたい。

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

自分の思う通りに正誤判断をしてくれない
correctとbutton.textContentの内容が一致したボタンを押しても不正解としか表示されない。

該当のソースコード

const question = "ゲーム市場最も売れたゲームは？";
const answers = [
  'スーパーファミコン',
  'ニンテンドースイッチ',
  'ニンテンドーDS',
  'WiU'
];
const correct = 'ニンテンドーDS';
document.getElementById('js-question').textContent = question;
const $button = document.getElementsByTagName('button');
$button[0].textContent = answers[0];
$button[1].textContent = answers[1];
$button[2].textContent = answers[2];
$button[3].textContent = answers[3];

console.log($button[2].textContent);

$button[0].addEventListener('click', () => {
  if (correct === $button[0].textcontent) {
    window.alert('正解');
  } else {
    window.alert('不正解');
  }
});
$button[1].addEventListener('click', () => {
  if (correct === $button[1].textcontent) {
    window.alert('正解');
  } else {
    window.alert('不正解');
  }
});
$button[2].addEventListener('click', () => {
  if (correct === $button[2].textcontent) {
    window.alert('正解');
  } else {
    window.alert('不正解');
  }
});
$button[3].addEventListener('click', () => {
  if (correct === $button[3].textcontent) {
    window.alert('正解');
  } else {
    window.alert('不正解');
  }
});

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

Bootstrap使用。VSコードで記述

Answer 1

画面を読み込んだ時にこのjs全体を読み込むようなfunctionを定義してやれば、おそらくうまくいきそうな気がします。

Comments

[pepe0730]

回答有り難うございます。
https://note.com/aaakeru/n/nc2f61dd9ce16
この動画の通り進めていてこちらの動画ではそのような記述がなくうまく実行されていたのですが何か違いがあるのですかね？
全体を読み込むfunctionの記述があれば教えていただきたいです。

[educ_gt]

なるほどです。

htmlにjs読み込ませるシンプルなアプリケーションなら、リロードが影響することもなさそうなので、不要そうです！

では、
console.log($button[2].textContent);ここでは値出力出来ていますか？

[pepe0730]

はい、ニンテンドーDSと出力されています。

[educ_gt]

$button[2].addEventListener('click', () => {
console.log($button[2]);
if (correct === $button[2].textcontent) {
window.alert('正解');
} else {
window.alert('不正解');
}
});
こんな感じにするといかがでしょう

[educ_gt]

なにか出力されますか？

[pepe0730]

ニンテンドーDSと出力されました。

[pepe0730]

<button type="button" class="ml-1 btn btn-primary">ニンテンドーDS</button>
と出力されていました。

[pepe0730]

解決しました。
textContentを間違えて「textcontent」と記述していました。
お時間いただき有り難うございました！

[miyabi_pudding]

解決したなら、BA選出して、質問を閉じましょう。