简单修复，我的 Javascript 出错

Question

Have an issue trying to fix the errors in my Javascript syntax. Sure it is something simple and I'm over-looking but it's not sinking in. Included the HTML and CSS.

Javascript Code:

const menuIcon = document.querySelector(".hamburger-menu");
const navbar = document.querySelector(".navbar");

menuIcon.AddEventListener("click", () => { 
    navbar.classList.toggle("change");
});

ERROR

line. col.error.

1 1. 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).

2 1 'const' is available in ES6 (use 'esversion: 6') or Mozilla JS extensions (use moz).

4 38 'arrow function syntax (=>)' is only available in ES6 (use 'esversion: 6').

CSS

/*hamburger*/
.hamburger-menu{
    width:35px;
    height:30px;
    position:fixed;
    top:60px;
    right:60px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    justify-content:space-around;
}

.line{
    width:100%;
    height:3px;
    background-color:#333;
    transition:alt 0.8s;
}

.change .line-1{
    transform:rotateZ(-405deg) translate(-8px,6px);
}

.change .line-2{
    opacity:0;
}

.change .line-3{
    transform:rotateZ(405deg) translate(-8px,-6px);
}

.nav-list{
    text-align:right;
}

.nav-items{
    list-style:none;
    margin:25px;
}

.nav-link{
    text-decoration:none;
    color:#eee;
    position:relative;
    padding:3px 0;
}

.nav-link::before,
.nav-link::after{
    content:"";
    width:100%;
    height:2px;
    background-color:#fff;
    position:absolute;
    left:0;
    transform:scalex(0);
    transition:transform .5s;
}

.nav-link::after{
    bottom:0;
}

.nav-link::before{
    top:0;
}

.hav-link:hover::before,
.hav-link:hover::after{
    transform:scalex(1)
}

.navbar{
    width:550px;
    height:132px;
    background-color:#333;
    position:fixed;
    top:0;
    right:-550px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:0 0 0 50px;
    transition: right 0.8s cubic-bezier(1, 0, 0, 1);
}

.change{

    right:0;
}

/*hamburger*/

HTML

<nav class="navbar">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<ul class="nav-list">
    <li class="nav-item">
<a href="about.php?page_id=46">
About</a></li>
    <li class="nav-item">
<a href="portfolio.php?page_id=44">
Portfolio</a></li>
    <li class="nav-item">
<a href="blog.php?page_id=530">
Blog</a></li>
    <li class="nav-item">
<a href="mailto:kfrancis@kfrancisdesigns.com?Subject=Hello%20" target="_top" rel="noopener noreferrer">
Contact</a></li>
</ul>
</nav>

Answer 1

You can add /*jshint esversion: 6 */ ontop of your .js files to fix this issue, as this is not a JavaScript Engine error.

Furthermore, AddEventListener is not a JavaScript function; addEventListener is, as pointed by TJ Crowder in a comment.