时间戳

首页 > 解决方案 > 未捕获的类型错误：无法在 HTMLImageElement 处读取 null 的属性“classList”

javascript - 未捕获的类型错误：无法在 HTMLImageElement 处读取 null 的属性“classList”

问题描述

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

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>

标签： javascripthtmlcss

解决方案

用于修复小屏幕上的切换按钮

解决方案：粘贴此代码而不是您的 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；在你的情况下意味着: getElementById('nav'): 它正在搜索一个名为 nav 但你没有的#Id。所以你必须决定：你可以使用getElementById('')，但你需要在你的<nav>标签中添加一个名为 nav 的 id；所以<nav id="nav">。

或者您可以使用document.querySelector('nav')而不是document.getElementById('nav').

第二

解决第一个问题后，您会看到另一个问题，那就是您在小屏幕上的切换按钮不起作用。那是因为您在 上切换“hide-mobile”类<nav>并且您不希望那样，您想要在<ul>元素上切换该类，因为它是默认包含“hide-mobile”类的元素。

推荐阅读