事件处理程序中的错误：TypeError：无法读取 null 的属性“数据集”

Question

所以当我点击我的汉堡包时，我得到了上面提到的错误。单击汉堡后，我的整个页面变白，当我右键单击时，什么也没有出现。问题出在哪里？我在网上搜索了很多类似的问题。这里只讲了把script标签放在最下面，写window.onload函数。我已将脚本标签放在正文的底部，但仍在发生这种情况。 错误信息： 事件处理程序中的错误：TypeError：无法读取 null 的属性“数据集” 在 Jr (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:103527) 在 Xr.updateState (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105004) 在 chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:105819 在 chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:73161 在 chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110691 在 Array.forEach () 在 wi.fire (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:110679) 在 _onBgPortMessage (chrome-extension://kbfnbcaeplbcioakkpcpgfkobkghlhen/src/js/Grammarly-check.js:2:115134)

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>

SASS

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文件中添加一个匿名函数作为点击事件的回调

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/