Javascript 为什么这个代码会给我一个；无法读取属性'；风格'；“无效”的定义；错误？

我对JavaScript比较陌生，所以我确信这只是我忽略的一点。这是我的密码：

<a class="shop nav" href="#" onclick="shopBar()">Shop</a>
<div class="nav__menu">
    <a class="buy__list" href="#">Shop Stuff</a>
    <a class="buy__list" href="#">Shop Stuff</a>
    <a class="buy__list" href="#">Shop Stuff</a>
    <a class="buy__list" href="#">Shop Stuff</a>
</div>

<style>
    .nav__menu {
        display: none;
    }
</style>
    
<script>
    function shopBar() {
        var x = document.getElementById("nav__menu");
        if (x.style.display === "none") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>

---

感谢您提供的帮助：）

您正在尝试按id获取元素，但是没有这样的元素具有此id，因此getElementWithId返回null，这就解释了错误

<div class="nav__menu"> // change class here to id for your code to work

//将此处的类更改为id，以便代码正常工作

您使用的是document.getElementById（），但试图通过其类名将元素作为目标。要按类名以元素为目标，请使用document.getElementsByClassName（）

---

（请参阅）

如果x的值为

null

，这意味着没有id为

导航菜单的元素，则发生这种情况的唯一方法是。问题是元素具有类
nav\uu菜单
，而不是id
nav\uu菜单
。将类切换到id，您就不会有问题。
简短的回答是，使用
而不是

让我给你更多的细节。在HTML中命名元素有两种主要方式：使用
类
或
id
。两者的区别在于
id
是唯一的。只能有一个元素具有相同的
id
。对于
类
，您可以想要多少就有多少

因此，对于您的情况，您的代码应该是


函数shopBar（）{
var x=document.getElementById（“导航菜单”）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
}
.nav\u菜单{
显示：无；
}

var x=document.getElementById（“导航菜单”）但是您有一个id不是
nav\u menu
的类，没有
nav\u menu
的
id
元素<代码>导航菜单是一个类，您需要根据其类名选择元素：
document.getElementsByClassName（“导航菜单”）[0]。谢谢！真不敢相信我居然没看到这个。
<div class="nav__menu"> // change class here to id for your code to work