事件处理程序中出错：TypeError：无法读取null的属性“dataset”

Question

所以当我点击我的汉堡时，我得到了上面提到的这个错误。点击汉堡包后，我的整个页面变成白色，当我右键点击时，什么也不会出现。这里的问题出在哪里，我在网上搜了很多类似的问题。这里只讨论了将script标记放在底部并编写window.onload函数。我已经把script标记放在了正文的底部，但这仍然在发生。错误消息：事件处理程序中出错：TypeError：无法在Jr（chrome-extension：//kbfnbcaeplbcioakkpcpgfkobghlhen/src/js/grammarly-check.js:2:103527)在xr上读取属性“dataset”为空。updateState（chrome-extension：//kbfnbcaeplbcioakkpcpgfkobghlhen/src/js/grammarly-check.js:2:105004)在chrome-extension：

HTML

<header>
        <nav class="wrapper2">
            <div class="logo">
                <h1>LO</h1>
            </div>
            <div class="navbar">
                <ul>
                    <li><a>ABOUT</a></li>
                    <li><a href="form2.html">ARTICLES</a></li>
                    <li><a href="#newsletter">SUBSCRIBE</a></li>
                </ul>
            </div>
        </nav>
        <div class="hamburger" onclick="open()">
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <div class="hero">
            <h1>LOMBOK</h1>
            <h2>HOLISTIC HEALTH & MORE</h2>
            <div class="bigbar"></div>
        </div>
    </header>

萨斯

header{
    background-image: url(../images/heroimg.jpg);
    background-size: cover;
    background-position: 65%;
    height: 100vh;
    margin: 10px;
    nav{
        display: none;
        justify-content:space-between;
        .logo{
            font-size: 1.5rem;
            position: relative;
            top: -10px;
        }
        .navbar ul{
            display: flex;
            width: 480px;
            justify-content: space-between;
            li{
                list-style: none;
                cursor: pointer;
                letter-spacing: 0.2rem;
                a{
                    text-decoration: none;
                    color: black;
                }
            }
            li:last-child{
                border: 2px solid black;
                padding: 15px 20px;
                position: relative;
                top:-16px;
            }
        }
    }
    .hamburger{
        position: absolute;
        top: 2rem;
        right: 1.8rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 20px;
        cursor: pointer;
        .bar{
            height: 5px;
            width: 100%;
            background-color:$primary-color;
            border-radius: 10px;
            }
        }
    .hero{
        height: 80vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        line-height: 1.7;
        h1{
            font-size: $primary-size;
            font-weight: 600;
        }
        h2{
            font-size: $secondary-size;
            font-weight: 500;
        }
        .bigbar{
            display: inline-block;
            height: 7px;
            width: 45px;
            background-color: $secondary-color;
            margin-top: 20px;
        }
    }
}
.active{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}
.bgdark{
    background-position: left bottom;
    opacity: 0.4;
}
.inactive{
    display: none;
}

JS

window.onload = function() {
    const open = ()=> {
        const nav = document.querySelector("nav");
        const header=document.querySelector("header");
        const hero=document.querySelector(".hero");
        nav.classList.toggle(".active");
        header.classList.toggle(".bgdark");
        hero.classList.toggle(".inactive");
    };
};

Answer 1

这里的问题是，open()函数是window对象https://developer.mozilla.org/en-us/docs/web/api/window/open上的一个保留方法，因此当您在onclick参数上添加open()时，它将激发window.open()方法，只要不带任何参数执行该方法，就会打开一个黑页（因此没有DOM要检查）

因此，一个简单的修复方法就是将函数重命名为任何还不是window对象的标准方法的函数。或者只添加一个匿名函数作为对js文件中click事件的回调

document.querySelector('.hamburger').addEventListener('click', function(e) {
    const nav = document.querySelector("nav");
    const header=document.querySelector("header");
    const hero=document.querySelector(".hero");
    nav.classList.toggle("active");
    header.classList.toggle("bgdark");
    hero.classList.toggle("inactive");
});

下面是一些简单的小提琴https://jsfiddle.net/5hdk1op4/