【javascript】複数のイベントが作動しない

前提・実現したいこと

html&css、javascriptを用いてスマホサイト(レスポンシブ)を作成しております。
ハンバーガーメニューとサーチボタンのみjavascriptを使用しております。
構文的に全く難しくない内容だと思うのですが、、、

何かと干渉しているのかと思い、コンソールで調べてもダメ。いろいろコードを変えてもダメ。
そんなこんなで未解決のまま3日も経過してしまいました。

どなたか、このサーチボタンが動かない原因が分かる方
いらっしゃいませんでしょうか？
本当に困っています、、、、
ちなみに、jsは初心者です。

具体的には　「#open_search」をclcikしても、「#search_menu」が開きません。
一方、「#open_menu」はclickすると「#menu」が開きます。

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

コンソールでエラーなし、idチェックは問題なし

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>#####</title>
6  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
7  <link rel="stylesheet" href="css/js_test.css">
8  <meta name="viewport" content="width=device-width,initial-scale=1">
9  <mmeta name="description" content="#####"
10</head>
11<body>
12  <header>
13    <div class="container">
14      <i id="open_search" class="fas fa-search"></i>
15      <nav id="search_menu">
16        <i id="close_search" class="fas fa-times"></i>
17          <form id="search_box" action="######" target="_top" accept-charset="euc-jp">
18            <input type="hidden" name="sv" value="6">
19            <input type="hidden" name="sid" value="###">
20            <input type="hidden" name="su" value="####">
21            <input type="hidden" name="sn" value="album">
22            <input type="text" name="sitem" class="formtext" placeholder="キーワードを入力" required>
23            <input type="hidden" name="f" value="A">
24          </form>
25          <!-- 人気のキーワード -->
26          <section id="keyword">
27            <h3>人気のキーワード</h3>
28            <a href="####">####</a>
29            <a href="####">####</a>
30            <a href="####">####</a>
31            <a href="####">####</a>
32          </section>
33        </nav>
34
35
36
37        <a href="#">
38          <img class="logo" src="" width="120"height="20" alt="LOGO">
39        </a>
40
41        <i id="open_menu" class="fas fa-bars"></i>
42        <nav id="menu">
43        <i id="close_menu" class="fas fa-times"></i>
44        <ul>
45          <li><a href="#">####</a></li>
46          <li><a href="#">####</a></li>
47          <li><a href="#">####</a></li>
48          <li><a href="#">####</a></li>
49        </ul>
50      </nav>
51    </div>
52  </header>
53
54
55
56    <script>
57    "use strict";
58
59     window.addEventListener('load', function() {
60        var opensearch = document.getElementById('open_search');
61        console.log(opensearch);
62        var closesearch = document.getElementById('close_search');
63        console.log(closesearch);
64        var searchmenu = document.getElementById('search_menu');
65        console.log(searchmenu);
66        var openMenu = document.getElementById('open_menu');
67        console.log(openMenu);
68        var closeMenu = document.getElementById('close_menu');
69        console.log(closeMenu);
70        var menu = document.getElementById('menu');
71        console.log(menu);
72
73
74        opensearch.addEventListener('click', function() {
75          searchmenu.classList.add('shown');
76        });
77        closesearch.addEventListener('click', function() {
78          searchmenu.classList.remove('shown');
79        });
80        openMenu.addEventListener('click', function() {
81          menu.classList.add('shown');
82        });
83        closeMenu.addEventListener('click', function() {
84          menu.classList.remove('shown');
85        });
86     });
87    </script>
88  </body>
89  </html>
90

css
1
2/* small screens */
3body {
4  background: #fff;
5  font-size: 14px;
6  font-family: Verdana, sans-serif;
7  margin: 0;
8  color: #333;
9}
10header h1 {
11  font-size: 28px;
12  font-weight: normal;
13}
14
15a{
16  text-decoration:none;
17}
18
19p {
20  line-height: 2;
21}
22
23.logo{
24  clear: both;
25  background: pink;
26}
27
28h2{
29  font-size: 90%;
30  margin-top: 2px;
31  margin-bottom: 2px;
32  border-radius: 10px;
33  margin-left: auto;
34  margin-right: auto;
35  width: 55%;
36  height: auto;
37  background-color: White !important;
38  color: #333 !important;
39  font-family:"Lato", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", Meiryo, \30e1\30a4\30ea\30aa, "MS PGothic", sans-serif;
40}
41
42.container {
43  text-align: center;
44  padding-top: 15px;
45  padding-bottom: 15px;
46  width: 90%;
47  margin: 0 auto;
48}
49
50body > section {
51  padding: 60px 0;
52}
53
54body > section:nth-of-type(odd) {
55  /* background: #fff; */
56}
57
58/* メニュー */
59#open_menu {
60  float: right;
61  font-size: 24px;
62  cursor: pointer;
63}
64#close_menu {
65  padding: 30px;
66  padding: 15px;
67  float: right;
68  cursor: pointer;
69}
70
71#menu {
72  position: absolute;
73  top: 0;
74  left: 0;
75  right: 0;
76  background: rgba(0, 0, 0, .8);
77  color: #fff;
78  display: none;
79}
80#menu.shown {
81  display: block;
82}
83
84#menu ul {
85  list-style: none;
86  margin: 0;
87  padding: 10px 20px;
88}
89
90#menu li {
91  line-height: 2;
92  padding-left: 20px;
93  padding-right: 20px;
94}
95
96#menu a {
97  text-decoration: none;
98  color: inherit;
99}
100/* ここまで */
101
102
103/* サーチ */
104#open_search {
105  float: left ;
106  font-size: 24px;
107  cursor: pointer;
108}
109
110#close_search {
111  font-size: 30px;
112  padding: 15px;
113  float: right;
114  cursor: pointer;
115}
116
117#search_menu {
118  height: 100%;
119  position: absolute;
120  top: 0;
121  left: 0;
122  right: 0;
123  background: rgba(0, 0, 0, .8);
124  color: #fff;
125  display: none;
126}
127
128#search_menu .shown {
129  display: block;
130}
131
132#search_menu a {
133  text-decoration: none;
134  color: inherit;
135}
136
137#search_box{
138  clear:both ;
139  text-align: center;
140  margin-top: 10px;
141}
142#keyword{
143  padding-left: 10px;
144  padding-right: 10px;
145  margin-top: 20%;
146  text-align: center;
147}
148
149#keyword a{
150  padding-left: 5px;
151  padding-right: 5px;
152  color: #0068B7 !important;
153}
154.formtext{
155  margin-top: 10px;
156  text-align: center;
157  border: none;
158  border-bottom: 2px solid White;
159  padding-top: 1em;
160  padding-left: 5%;
161  padding-right: 5%;
162  padding-bottom: 0.3em;
163  width: 70%;
164  height: auto;
165  font-size: 200%;
166  line-height: 1.2;
167  background-color: inherit;
168  color: #fff;
169}
170input {
171  border: none;
172  outline: none;
173}
174/* ここまで */
175
176
177/* medium screens */
178
179@media (min-width: 570px) {
180
181  .feature img {
182    width: 50%;
183  }
184
185  .feature p {
186    width: 45%;
187  }
188
189  .feature:nth-of-type(odd) p {
190    float: right;
191    padding-left: 5%;
192  }
193
194  .feature:nth-of-type(even) p {
195    float: left;
196    padding-right: 5%;
197  }
198
199  .feature {
200    overflow: hidden;
201  }
202
203  .news .flex {
204    display: flex;
205    justify-content: space-between;
206  }
207
208  .news-item {
209    width: 30%;
210  }
211
212}
213
214/* large screens */
215
216@media (min-width: 912px) {
217
218  .container {
219    width: 820px;
220  }
221
222  #open_menu {
223    display: none;
224  }
225
226  #close_menu {
227    display: none;
228  }
229
230  #menu {
231    display: block;
232    position: static;
233    background: transparent;
234    color: #333;
235  }
236
237  #menu ul {
238    padding: 0;
239    float: right;
240  }
241
242  #menu li {
243    display: inline-block;
244    width: 60px;
245    text-align: center;
246  }
247
248}
249

kei344

2019/03/31 10:01

「動きません」とは「何をしたときに」「どうなると思って」「どうなったのか」を、具体的に記述されたほうが回答を得られやすいと思います。また、「サーチボタン」とやらが提示されたコードに見当たりません。ご確認ください。

m.ts10806

2019/03/31 10:05

タイトルは要件のみ記載してください。困ってる度合いとか、煽り文句にもあたるので不要と思います

E_k

2019/03/31 10:05

ご指摘ありがとうございます。動かないとは　「#open_search」をクリックしても、「#search_menu」が開かないということです。言葉足らずですみません。。。一方、「#open_menu」はクリックすると「#menu」が開きます。

m.ts10806

2019/03/31 10:07

質問は編集できますので適宜ご対応ください

kei344

2019/03/31 10:07

（質問文は編集できます）この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。

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

回答1件

ベストアンサー

CSS
1/*
2#search_menu .shown
3            ↓   */
4#search_menu.shown {
5  display: block;
6}
7```**動くサンプル：**[https://jsfiddle.net/tmkej6qr/](https://jsfiddle.net/tmkej6qr/)