JavaScript TypeError-变量为null

Question

有人知道为什么我会收到此错误吗？

 TypeError: toggle is null

这是我的html和JS代码。

        var toggle = document.getElementById("js-navbar-toggle");
    var navList = document.getElementById("nav-list");
    toggle.addEventListener("click", function () {
    	navList.classList.toggle("active");
    });

	<header class="flex-container">
		<nav id="navbar" class="navbar">
			<span id="js-navbar-toggle" class="navbar-toggle">
				<i class="fas fa-bars fa-2x"></i>
			</span>
			<ul id="nav-list" class="main-nav flex-container">
				<li><a href="#">lorem</a></li>
				<li>lorem</li>
				<li>lorem</li>
				<li>lorem</li>
			</ul>
		</nav>
		<div class="flex-container header-title">
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h1>
			<hr>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
		</div>
	</header>

也许这是DOM的问题？我没有找到类似的主题...