Javascript ในเว็บไซต์ผมมันไม่ทำงานครับ

กระทู้คำถาม

JavaScript CSS HTML5 การพัฒนา Web Application

คือผมเริ่มหัดเขียนเว็บอะครับ แล้วทีนี้ผมได้ดูคลิปๆ นึงแล้วก็ทำตาม (คลิปนี้เลยครับ https://www.youtube.com/watch?v=gXkqy0b4M5g) โดยผมก็ทำตามในคลิปทุกอย่าง แต่พอผมกดปุ่มเมนูแล้ว มันก็ไม่ออกมาเหมือนของในคลิปอะครับ ซึ่งโค้ดของเว็บไซต์ผมก็เป็นตามนี้เลยครับ

HTML :
[code]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <title>title</title>
</head>
<body>
    <section class="nav">
        <div class="logo">
            <p>OTOP บุรีรัมย์</p>
        </div>
        <ul class="menu">
            <li class="menu-list"><a href="">button 1</a></li>
            <li class="menu-list"><a href="">button 2</a></li>
            <li class="menu-list"><a href="">button 3</a></li>
        </ul>
        <div class="burger">
            <div class="line-1"></div>
            <div class="line-2"></div>
            <div class="line-3"></div>
        </div>
    </section>
    <section class="adsslide">
        
    </section>
    <section class="goods_list">
        
    </section>
    <section class="category">
        
    </section>
    <footer>
        
    </footer>
    <script src="javascript/index_nav.js"></script>
</body>
</html>
[/code]
CSS :
[code]/*-------------------------Global style--------------------------*/
@font-face {
    font-family: Athiti;
    src: url("../font/Athiti-Medium.ttf");
}

* {
    margin: 0;
    padding: 0;
}
/*-------------------------Nav style--------------------------*/
.nav {
    min-height: 8vh;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-family: Athiti;
    background: #fff;
    border-bottom: 3px solid orange;
    -webkit-user-select: none;  /* Chrome ทุกเวอร์ / Safari ทุกเวอร์ */
    -moz-user-select: none;     /* Firefox ทุกเวอร์ */
    -ms-user-select: none;      /* IE 10+ */
    -o-user-select: none;
    user-select: none;
}
.nav .logo {
    font-size: 20px;
    letter-spacing: 3px;
}
.nav .menu {
    display: flex;
    list-style: none;
}
.nav .menu .menu-list {
    margin: 10px;
}
.nav .menu .menu-list a {
    padding: 3px 11px;
    text-decoration: none;
    color: #000;
    border: solid 2px transparent;
    border-radius: 5px;
    transition: .3s ease;
}
.nav .menu .menu-list a:hover {
    background-color: orange;
}
.nav .menu .menu-list a:active {
    border: solid 2px orange;
    background-color: #fff;
}
.nav .burger {
    display: none;
    cursor: pointer;
}
.nav .burger div[class*="line"] {
    margin: 5px 0;
    height: 3px;
    width: 26px;
    background: orange;
    border-radius: 2px;
}
@media screen and (max-width:760px) {
    body {
        overflow-x: hidden;
    }
    .nav .menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        justify-content: space-around;
        align-items: center;
        right: 0;
        height: 92vh;
        width: 50%;
        top: 8vh;
        background: orange;
        transform: translateX(100%);
        transition: .5s ease;
    }
    .nav .menu .menu-list {
        opacity: 0;
    }
    .nav .burger {
        display: block;
    }
}
.nav-active {
    transform: translateX(0%);
}
[/code]
JavaScript :
[code]console.log('Test') ไอตรงนี้ผมลองใส่ไว้ เช็คดูว่ามันจะขึ้นใน dev tool รึเปล่า สรุปคือขึ้นครับ
const navSlide = ()=>{
    const burger = document.querySelector('.burger')
    const nav = document.querySelector('.menu')
    burger.addEventListener('click',()=>{
        nav.classList.toggle('nav-active')
    })
}
navSlide()
[/code]
ผมลองทำตามที่ในคลิปเค้าสอนหมดเลยครับ อาจจะมีบางส่วนที่ผมดัดแปลงไปเป็นของตัวเอง แต่โดยรวมก็เหมือนของเค้าครับ ซึ่งผมลัพธ์คือปุ่มเมนูที่ผมทำตามคลิปนี้มันไม่แสดงผลครับ ผมไม่รู้จะแก้ยังไงแล้ว ลองอัปขึ้น web host เพื่อทดสอบก็แล้ว ก็ยังไม่ได้อยู่ดี ขอคำแนะนำหน่อยครับ ขอบคุณครับ