未捕獲的類型錯誤：無法在 HTMLButtonElement 處讀取 null 的屬性“樣式”

Question

當嘗試按導航切換圖標以顯示導航欄內容時，我收到此錯誤。

<nav>
            <button id="nav-toggle" class="hamburger-menu">
                <span class="strip"></span>
                <span class="strip"></span>
                <span class="strip"></span>
            </button>
            <ul class="nav-menu-container">
                <li><a href="#">Home</a></li>
                <li><a href="#">Games</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>

這是我的 javascript：

<script>
        document.getElementById('nav-toggle').addEventListener('click', function () {
        let navMenu = document.getElementById('nav-menu-container');
        navMenu.style.display = (navMenu.offsetParent === null  ? 'block' : 'none');
    });
</script>

Answer 1

您應該為ul使用id屬性，因為您嘗試使用getElementById來獲取它。

<ul id="nav-menu-container">

Answer 2

您將“nav-menu-container”定義為 class 而不是 id。

Answer 3

nav-menu-container是 class 的名稱，但您像 id 一樣訪問它。

 document.getElementById('nav-toggle').addEventListener('click', function () { let navMenu = document.getElementById('nav-menu-container'); navMenu.style.display = (navMenu.offsetParent === null? 'block': 'none'); });

 <nav> <button id="nav-toggle" class="hamburger-menu"> <span class="strip"></span> <span class="strip"></span> <span class="strip"></span> </button> <ul id="nav-menu-container"> <li><a href="#">Home</a></li> <li><a href="#">Games</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>