Question

这就是我在网站上遇到的问题

Uncaught TypeError: Cannot read property 'classList' of null at HTMLImageElement.

这是我的代码

https://jsfiddle.net/kikiZ/59ej2g8m/

也许还有另一种解决此问题的方法，因为我在其他网站上查找，但仍然找不到答案

以及此代码中的问题

        <script>

        var menu = document.getElementById('menu');
        var nav = document.getElementById('nav');
        var exit = document.getElementById('exit');

        menu.addEventListener('click', function(e) {
            nav.classList.toggle('hide-mobile');
            e.preventDefault();
        });

    </script>

Answer 1

您没有任何ID为“ nav”的元素。

更改document.getElementById（'nav'）;到document.querySelector（'nav'）或将id nav添加到元素nav

Answer 2

用于在小屏幕上固定切换按钮

解决方案：粘贴此代码而不是Javascript代码，然后尝试阅读它：

var menu = document.getElementById('menu');
var nav = document.querySelector('nav ul');
var exit = document.getElementById('exit');

menu.addEventListener('click', function(e) {
    nav.classList.toggle('hide-mobile');
    e.preventDefault();
});

说明：

第一：

如果您想使用classlist方法，那么您应该在HTML <nav>标记内有一个类。您正在执行的操作是在没有内容的情况下搜索类，因为getElementById('')所做的是它在 DOM （HTML文件）中搜索名称为Id的ID与传递的参数匹配；在您的情况下是指： getElementById('nav')：它正在搜索名称为nav的#Id，但您没有。因此，您必须决定：您可以使用getElementById('')，但需要在<nav>标签中添加一个名称为nav的ID；所以<nav id="nav">。

或者您可以使用document.querySelector('nav')代替document.getElementById('nav')。

第二

修复第一个问题后，您还会看到另一个问题，这是小屏幕上的切换按钮不起作用。那是因为您要切换<nav>上的“隐藏移动”类，而又不想这么做，您想要在<ul>元素上切换该类，因为它是包含“隐藏移动”类。

未被捕获的TypeError：无法在HTMLImageElement读取null的属性“ classList”

2 个答案: