使用javascript不工作的变量隐藏内容

Question

似乎我的代码不工作。然而，我以前使用过这个代码，我有它在另一个项目中工作。我一直盯着它看。我找不到问题。

我可以不应用onClick函数像这样与display:函数或什么…或者有更好的方法来做这件事。

这是一个打开我的菜单的按钮。

let menuBtn = document.querySelector(".Btn");
let testing = document.querySelector(".test");
menuBtn.onClick = ()=>{
    testing.classList.add("hide");
}

.test {
    display: block;
}
.test.hide {
    display: none;
}
.Btn {
    width: 30px;
    height: 30px;
    background-color: teal;
}

<nav class="test">
    <ul>
        <li>test</li>
    </ul>
</nav>
<div class="Btn">test</div>

Answer 1

onclick功能有小错别字。是onclick而不是onclick

let menuBtn = document.querySelector(".Btn");
let testing = document.querySelector(".test");
menuBtn.onclick = ()=>{
    testing.classList.add("hide");
}

.test {
    display: block;
}
.hide {
    display: none;
}
.Btn {
    width: 30px;
    height: 30px;
    background-color: teal;
}

<nav class="test">
    <ul>
        <li>test</li>
    </ul>
</nav>
<div class="Btn">test</div>

Answer 2

这里的问题是你要求它添加一个类的隐藏使用javascript，但在你的CSS你定义。test.hide

/*should be*/
.hide{
    display:none;
}
/*not*/
.test.hide{
    display:none;
}