モーダルウィンドウを表示させたいが、Uncaught TypeErrorが発生してしまう

前提・実現したいこと

PHPを使って４択クイズアプリを作っています。
選択肢をクリックした時にモーダルウィンドウを表示させる機能を実装中に以下のエラーメッセージが発生しました。

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

エラーメッセージ
quiz1.js:10 Uncaught TypeError: answer.addEventListener is not a function
    at HTMLDocument.<anonymous> (quiz1.js:10)

該当のソースコード

JavaScript
1{
2      const answer = document.getElementsByClassName('answer');
3      const close = document.getElementById('close');
4      const modal = document.getElementById('modal');
5      const mask = document.getElementById('mask');
6
7      answer.addEventListener('click', () => {
8        modal.classList.remove('hidden');
9        mask.classList.remove('hidden');
10      });
11
12      close.addEventListener('click', () => {
13        modal.classList.add('hidden');
14        mask.classList.add('hidden');
15      });
16
17      mask.addEventListener('click', () => {
18        close.click();
19      });
20    }
21

php
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>問題1(1〜10)</title>
6  <link rel="stylesheet" href="../css/quiz.css">
7</head>
8<body>
9<?php if ($quiz->isFinished()) : ?>
10    <div id="container">
11      <div id="result">
12        あなたの得点は・・・
13        <div><?= h($quiz->getScore()); ?> 点</div>
14      </div>
15      <a href="index.php"><div id="btn">TOPページに戻る</div></a>
16    </div>
17    <?php $quiz->reset(); ?>
18  <?php else : ?>
19
20  <div id="container">
21    <h1>Q. <?= h($data['q']); ?></h1>
22    <ul>
23      <?php foreach ($data['a'] as $a) : ?>
24        <li class="answer"><?= h($a); ?></li>
25      <?php endforeach; ?>
26
27      <div id="mask" class="hidden"></div>
28
29      <section id="modal" class="hidden">
30        <p>解説:</p>
31        <div id="close">
32          閉じる
33        </div>
34    </ul>
35    <div id="btn" class="disabled">次へ</div>
36  </div>
37  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
38  <script src="quiz1.js"></script>
39<?php endif; ?>
40</body>
41</html>

行動規範の内容に同意します

回答1件

よくある勘違いですが

getElement**"s"**ByClassName

です。

例え対象範囲内に1つしかなくても単数での取得ではなく[配列の1つ目]として取得されます。
一方addEventListenerはEventTargetに対して1つ1つ付与する必要があります。
forなどでループさせて個々に設定する必要があります。

投稿2020/01/26 08:54

m.ts10806

総合スコア80850

inotti

2020/01/26 09:46

m.ts10806さん回答有難う御座います。 getElementsByClassNameの記述に関しては自分の記述を確認しましたが、ちゃんとsが書かれていたので、そこがエラーの原因ではなさそうです。。。 addEventListenerはEventTargetに1つ1つ付与する必要があると言う事は、4択クイズなので、選択肢の4つ全てに付与しないといけないと言う事ですね。今後の実装のために覚えておきます。