JavaScript ハンバーガーメニューのアイコンを押してもメニューが出てこない

前提・実現したいこと

ハンバーガーメニューのアイコンをクリックしたときにメニューがスライドして出てくるようにしたい。
クリックイベントが反応しない。
ハンバーガーメニューを作成しているのですが、id=target をクリックした際にメニューをスライドさせて表示させたいのですが、ハンバーガーメニューのアイコンをクリックしても実行されません。
アイコンをクリックした際に、メニューをposition:absolute,leftでスライドして表示させたうえで、ハンバーガーメニューのアイコンを変更させて、✖の形のアイコンに変更させようとしました。

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

エラーメッセージ

該当のソースコード

**
HTML**

<div class="pfix">
        <nav class="nav" id="nav_f">
            <ul>
                <li><a href="#one" class="list">one</a></li>
                <li><a href="#two" class="list">two</a></li>
                <li><a href="#three" class="list">three</a></li>
                <li><a href="#four" class="list">four</a></li>
                <li><a href="#five" class="list">five</a></li>
            </ul>
        </nav>
        
        <div id="target">
        <div class="target_inner">
                <span class="target_inner_line target_inner_1" id="line1"></span>
                <span class="target_inner_line target_inner_2" id="line2"></span>
                <span class="target_inner_line target_inner_3" id="line3"></span>
            </div>
        </div>
        </div>

CSS

@media screen and  (max-width:768px){
    
    .mainnav__items{
        display: none;
    }
    
    .pfix{
        display: inherit;
    }
    
    #target{
        width: 40px;
        height: 30px;
        display: block;
        position: absolute;
        top: 35px;
        left: 84vw;
        cursor: pointer;
        transition: 1.5s;
    }
    
    .target_inner{
        width: 40px;
        height: 30px;
        position: relative;
    }
    
    .target_inner_line{
        display: block;
        width: 40px;
        height: 5px;
        background: #fff;
        transition: 1.5s;
        border-radius: 50px;
        position: absolute;
        z-index: 1;
    }
    
    
    .target_inner_1{
        top: 0;
    }
    
    .target_inner_2{
        top: 13px;
    }
    
    .target_inner_3{
        top: 26px;
    }
    
    .nav{
        width: 100%;
        height: 100vh;
        position: absolute;
        z-index: 1;
        left: -100%;
        background: rgba(99,99,99,.95);
        transition: 1.5s;
        color: white;
    }
    
   
    
    .nav a{
        color: white;
        display: block;
        text-decoration: none;
    }
    
    ul{
        margin: 0;
        padding: 0;
    }
    
    .nav li{
        height: calc(100vh/5);
        line-height: 200px;
        list-style: none;
        font-size: 3em;
        text-align: center;
    }
    
    .fadein{
        left: 0;
    }
    
    .linea, .lineb, .linec{
        background: #ffffff;
    }
    
    .linea{
        transform: rotate(225deg);
        top: 13px;
    }
    
    .lineb{
        opacity: 0;
    }
    
    .linec{
       transform: rotate(-225deg);
        top: 13px;
    }
    
    
}

Java script

var imgList = ["url(./images/top1.png)","url(./images/top2.png)","url(./images/top3.png)","url(./images/top4.png)","url(./images/top5.png)","url(./images/top6.png)"];

var num = -1;

function slideShow_timer (){
    
    if(num === 5){
        num = 0;
    } else {
        num++;
    }
    
    document.getElementById("slideShow").style.backgroundImage = imgList[num] ;
}

setInterval(slideShow_timer,3000);



function hamburger() {
　　document.getElementById('line1').classList.toggle('linea');
　　document.getElementById('line2').classList.toggle('lineb');
　　document.getElementById('line3').classList.toggle('linec');
　　document.getElementById('nav_f').classList.toggle('fadein');
}

document.getElementById('target').addEventListener('click', function () {
　　hamburger();
});

試したこと

getElementByIdをquerySelecterに変えてみたが効果はなかった。
clickイベントが動いている感じがしない。

補足情報（FW/ツールのバージョンなど）

https://tech-dig.jp/easy_hamburger/
参考にしたサイト

kei344

2019/10/13 13:50

質問タグが「Java」になっていますが、「JavaScript」の間違いでは。また、「Java Script」ではなく「JavaScript」という言語名なので、本文とタイトルも修正することをお勧めします。

kyoya0819

2019/10/13 13:54 編集

JavaとJavaScriptは全くの別物です。 JavaScriptがJava人気に乗っかって改名したから名前が似ているだけです。（やはり初心者の方は混同しやすいのかな..）

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

回答2件

ベストアンサー

動くサンプル：https://jsfiddle.net/pv4Lokse/

スクリプトの読み込み位置を変えるか、ページのロードを待つ必要があるのでは。

【ページの読み込み前・直後・完了時にスクリプトを実行する方法いろいろ - JavaScript TIPSふぁくとりー】
https://www.nishishi.com/javascript-tips/onload-page.html

投稿2019/10/14 02:47

kei344

総合スコア69596

退会済みユーザー

2019/10/14 03:37

ありがとうございました。おっしゃる通りページのロードが終わっていませんでした。助かりました。

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

JavaScript
1document.getElementById("slideShow")

これに対応する id の HTML要素が無いからですね。

ここを

html
1<div class="pfix">

このように直したら動きました。

html
1<div class="pfix" id="slideShow">

補足

ブラウザの「開発ツール」メニュー(Chromeでいうと右クリック-[検証])で見るとエラーが表示されるので、それを見てればすぐ辿り着いたと思います
コードが呼ばれてないかどうかの確認は、console.log() を入れて確認する等すると良いです
ハンバーガーメニューは真っ白で表示されない？ (全体に背景色が設定してある前提か)
下の方の関数２つの行頭に、全角空白が入っている (害は無いのかもしれないが)

→ 訂正。動いた状態の全文。上記の id="slideShow" は関係なかった。

html
1<html>
2    <head>
3        <style type="text/css">
4            @media screen and  (max-width:768px){
5                .mainnav__items{
6                    display: none;
7                }
8
9                .pfix{
10                    display: inherit;
11                }
12
13                #target{
14                    width: 40px;
15                    height: 30px;
16                    display: block;
17                    position: absolute;
18                    top: 35px;
19                    left: 84vw;
20                    cursor: pointer;
21                    transition: 1.5s;
22                }
23
24                .target_inner{
25                    width: 40px;
26                    height: 30px;
27                    position: relative;
28                }
29
30                .target_inner_line{
31                    display: block;
32                    width: 40px;
33                    height: 5px;
34                    background: #fff;
35                    transition: 1.5s;
36                    border-radius: 50px;
37                    position: absolute;
38                    z-index: 1;
39                }
40
41
42                .target_inner_1{
43                    top: 0;
44                }
45
46                .target_inner_2{
47                    top: 13px;
48                }
49
50                .target_inner_3{
51                    top: 26px;
52                }
53
54                .nav{
55                    width: 100%;
56                    height: 100vh;
57                    position: absolute;
58                    z-index: 1;
59                    left: -100%;
60                    background: rgba(99,99,99,.95);
61                    transition: 1.5s;
62                    color: white;
63                }
64
65                .nav a{
66                    color: white;
67                    display: block;
68                    text-decoration: none;
69                }
70
71                ul{
72                    margin: 0;
73                    padding: 0;
74                }
75
76                .nav li{
77                    height: calc(100vh/5);
78                    line-height: 200px;
79                    list-style: none;
80                    font-size: 3em;
81                    text-align: center;
82                }
83
84                .fadein{
85                    left: 0;
86                }
87
88                .linea, .lineb, .linec{
89                    background: #ffffff;
90                }
91
92                .linea{
93                    transform: rotate(225deg);
94                    top: 13px;
95                }
96
97                .lineb{
98                    opacity: 0;
99                }
100
101                .linec{
102                transform: rotate(-225deg);
103                    top: 13px;
104                }
105            }
106        </style>
107    </head>
108    <body style="background: lightgray">
109       <div class="pfix">
110            <nav class="nav" id="nav_f">
111                <ul>
112                    <li><a href="#one" class="list">one</a></li>
113                    <li><a href="#two" class="list">two</a></li>
114                    <li><a href="#three" class="list">three</a></li>
115                    <li><a href="#four" class="list">four</a></li>
116                    <li><a href="#five" class="list">five</a></li>
117                </ul>
118            </nav>
119        
120            <div id="target">
121            <div class="target_inner">
122                    <span class="target_inner_line target_inner_1" id="line1"></span>
123                    <span class="target_inner_line target_inner_2" id="line2"></span>
124                    <span class="target_inner_line target_inner_3" id="line3"></span>
125                </div>
126            </div>
127        </div>
128        
129        <script type="text/javascript">
130            function hamburger() {
131                document.getElementById('line1').classList.toggle('linea');
132                document.getElementById('line2').classList.toggle('lineb');
133                document.getElementById('line3').classList.toggle('linec');
134                document.getElementById('nav_f').classList.toggle('fadein');
135            }
136            
137            console.log(document.getElementById('target'));
138            document.getElementById('target').addEventListener('click', function () {
139                hamburger();
140            });
141        </script>
142    </body>
143</html>