モーダルウィンドウが開かない

phpとjavascriptを使って、以下のようなクイズページを作っています。
配列のキーを問題に、値が答えになっています。

例えば、画面上に表示された
apple
orange
banana
という英単語のどれかをクリックすると、モーダルウィンドウが開いて、答え（日本語名）が表示するという仕組みを作りたいのですが、
まず、モーダルウィンドウが開きません。。。

echo '<div class="open">'.$kind.'</div>';

この部分のclassをidにして動かすとモーダルウィンドウがうまく開いたのですが、
それだと一番上の値にしか作用しなかったため、classに書き直しました。
その途端、全く動かなくなりました。

改善点をご指導ください。よろしくお願いいたします。

index.php

<?php

$fruits = array(
'apple' => 'りんご',
'orange' => 'オレンジ',
'banana' => 'バナナ'
);

?>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <title>Modal Window</title>
 
</head>
<body>
   <?php
      foreach ($fruits as $kind) {
        echo '<div class="open">'.$kind.'</div>';
      }
    ?>

  <div id="mask" class="hidden"></div>
<!--モーダルウィンドウ部分-->
  <div id="modal" class="hidden">
   <p>答えはバナナです！</p>
    <div id="close">
      Close
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

main.js

 (function() {
  'use strict';

  var open = document.getElementByClassName('open');
  var close = document.getElementById('close');
  var modal = document.getElementById('modal');
  var mask = document.getElementById('mask');

  open.addEventListener('click', function() {
    modal.className = '';
    mask.className = '';
  });

  close.addEventListener('click', function() {
    modal.className = 'hidden';
    mask.className = 'hidden';
  });

  mask.addEventListener('click', function() {
    // modal.className = 'hidden';
    // mask.className = 'hidden';
    close.click();
  });
})();

style.css

.open,#close {
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
  margin: 0 auto;
  cursor: pointer;
}

#mask {
  background: rgba(0, 0, 0, 0.4);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

#modal {
  background: #fff;
  width: 300px;
  padding: 20px;
  border-radius: 4px;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#modal p {
  line-height: 1.5;
  margin: 0 0 20px;
}

#mask.hidden {
  display: none;
}

#modal.hidden {
  transform: translate(0, -500px);
}
コード

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

回答2件

ベストアンサー

.getElementsByClassName()ではないでしょうか。s が脱字してます。

Javascript
1//var open = document.getElementByClassName('open');
2var open = document.getElementsByClassName('open');

HTMLCollectionオブジェクトで返ってくるので
Array.prototype.forEach.callなどで処理してください。

【参考】
HTMLCollectionで配列メソッドを使う
https://hacknote.jp/archives/21892/

投稿2017/10/05 08:05

退会済みユーザー

総合スコア0

koyomi

2017/10/05 12:13

javascriptをしっかり勉強してから、またコードを考えたいと思います。ありがとうございました。

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

末尾の </li> は typo だと思うので消してみては

php
1echo '<div class="open">'.$kind.'</div></li>';
2

投稿2017/10/05 07:24

ykws

総合スコア1236

koyomi

2017/10/05 07:45

ご指摘ありがとうございます。ミスってました。 </li>を消しても動きません。。。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

モーダルウィンドウが開かない

関連した質問