クリックイベントの設定

アイコンをクリックしたらメニュー画面が表示されるように、JavaScriptで書いていきます。

• main.jsの作成
• id要素の取得
• クラス要素の取得

main.jsの作成

・これまでで要素は完成したのでクリックしたらメニュー画面が表示されるようにJavaScriptでクリックイベントを書いていきましょう。

・まずはJavaScriptを書いていくためのファイルを作っていきます。

・JavaScriptは一般的にbodyの閉じタグの直前に書いていくのでそこでscriptタグをを見込んであげましょう。今回はjsフォルダの中にmain.jsというファイルを作っていきます。

・bodyの閉じタグの直前に<script src="js/main.js"></script>と書いて行きます。VS Codeだとファイル名をホバーすると新しいファイルを作るか聞かれるのでCreateFileと進むと新しいファイルが作られます。

id要素の取得

・ファイルが作成できたら一番最初に'use strict’;と書いていきましょう。これはエラーチェックをしてくれるのでクセづけておくといいでしょう。

・次にブロックで囲ってあげてその中にJavaScriptを書いていきます。

・まずは要素を取得していきます。今回の場合は’open’と’overlay’を取得していきます。

・openは予めidで名前をつけておいたのでgetElementByIdを使って要素を取得していきます。このとき定数をつけておくと後で楽にコードをかけるのでconstを使って定数をつけておきましょう。

・openを取得する場合はこんな感じです。

const open = document.getElementById('open');

クラス要素の取得

・次にoverlayの要素も取得していきます。

・こちらはクラス名を指定してあるのでquerySelectorで要素を取得することができます。こちらも定数をつけておきましょう。

・こんな感じですね。

const overlay = document.querySelector('.overlay');

・このとき注意する点としてはドットを忘れないことです。querySelectorはセレクターを指定するのでドットがないとセレクターとして舞いされません。

・最後にopenをクリックしたら…というところまで書いておきましょう。

・addEventListenerを使えばいいのでこんな感じで書いていきましょう。

 open.addEventListener('click', () => {

  });

・クリックしたら波括弧の中身の処理をしてくれるので中身は次回書いていきます。