ボタンをClickしたときに画面を表示したいですが

JavaScriptでHTMLのボタン(id=myBtn)をクリックしたときに、ポップアップ画面(id=js-popup)を出したいですが、
なぜか常に表示されています。どこか悪いかを教えてください。

JavaScript
1<html>
2  <head>
3    <meta charset="UTF-8">
4  </head>
5  <body>
6  <div class="note-container">
7    <h2>Notes</h2>
8    <button class="fab" id="myBtn">+</button>
9    <div class="popup" id="js-popup" style="visibility:hidden">
10        <textarea class="meeting" id="meeting-memo" rows="30" cols="100">議事録記入</textarea>
11        <div class="btn-left">
12            <button class="btn" id="save">保存</button>
13        </div>
14        <div class="btn-right">
15          <button class="btn" id="cancel">削除</button> 
16        </div>
17    </div>
18  </div>
19
20  <script>
21    const new_memo = document.querySelector('#myBtn');
22    const popup = document.querySelector('#js-popup');
23    
24    function show_modal() {
25      popup.style.visibility = "visible"
26    };
27
28    new_memo.addEventListener('click', show_modal());    
29  </script>
30  </body>
31</html>

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

回答1件

ベストアンサー

以下に変えて試してみて下さい。

javascript
1//new_memo.addEventListener('click', show_modal());    
2new_memo.addEventListener('click', show_modal);

＜参考＞
■ addEventListenerメソッドを使ってイベントリスナーを登録する
https://www.javadrive.jp/javascript/event/index6.html

投稿2021/10/30 16:43

cx20

総合スコア4633

kinsncn

2021/10/30 17:12

参考になりました。（）があると関数が実行されることをうっかりしました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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

ボタンをClickしたときに画面を表示したいですが

関連した質問