简单修复，我的Javascript出错了

Question

有一个问题，试图修复我的Javascript语法中的错误。当然，这只是一些简单的东西，我看多了，但它没有沉淀下来。包括HTML和CSS。

Javascript代码。

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

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

ERROR

行.列.错误.

1 1. 'const'在ES6（使用'esversion: 6'）或Mozilla JS扩展（使用moz）中可用。

2 1 'const'在ES6中可用（使用'esversion: 6'）或Mozilla JS扩展（使用moz）。

4 38 '箭头函数语法(=>)'只在ES6中可用(使用'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*/

超文本标记语言

<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:[email protected]?Subject=Hello%20" target="_top" rel="noopener noreferrer">
Contact</a></li>
</ul>
</nav>

Answer 1

你可以添加 /*jshint esversion: 6 */ 在你 .js 文件来解决这个问题，因为这不是一个JavaScript引擎错误。

此外。AddEventListener 不是JavaScript函数。addEventListener 是，正如T.J. Crowder在评论中指出的那样。