开发者问题收集

为什么此代码会给出“无法读取 null 的属性‘style’”错误？

2020-07-22
75
javascript html css

我对 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>

当我点击 a 标签时，我收到错误： 

Uncaught TypeError: Cannot read property 'style' of null
    at shopBar (index.html:63)
    at HTMLAnchorElement.onclick (VM495 index.html:20)

感谢您提供的任何帮助 :)

3个回答

您正在使用 document.getElementById()，但尝试通过其类名定位元素。要通过类名定位元素，请使用 document.getElementsByClassName() （请参阅 https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName ）

louis.sugar
2020-07-22

您尝试通过 id 获取一个元素，但是没有这样的元素具有此 id，因此 getElementWithId 返回 null，这解释了错误 

<div class="nav__menu"> // change class here to id for your code to work
ehab
2020-07-22

发生这种情况的唯一方法是 x 的值为 null ，这意味着没有元素的 id 为 nav__menu 。问题是元素具有 类 nav__menu ，而不是 id nav__menu 。将类切换为 id，就不会有问题了。

Maimas2
2020-07-22