未捕獲的類型錯誤：當我嘗試在 chrome 中運行我的代碼時，無法讀取 null 的屬性“addEventListener”

Question

因此，當我嘗試在瀏覽器 chrome 中運行我的 html 文件時會記錄該錯誤，但在 Visual Studio 代碼中它不會記錄任何問題。 我該如何解決這個問題並確保它不會在未來發生？ 我的js代碼：

 const navbarBtn = document.querySelector("navbar__btn"); const navbarLinks = document.querySelector("navbar__links"); navbarBtn.addEventListener("click", function () { let value = navbarLinks.classList.contains("navbar__collapse"); if (value) { navbarLinks.classList.remove("navbar__collapse"); } else { navbarLinks.classList.add("navbar__collapse"); } });

Answer 1

您的代碼有兩件事可能有問題。

在 html 准備就緒之前執行的腳本

您需要確保在加載所需的 html 之后加載您的 JS。 沒有詳細說明，兩種好方法是：

加載 html 文件底部的腳本

    <script src="main.js"></script>
</body>

在你的腳本上使用defer

    <script defer src="./main.js"></script>
</head>

您的元素未正確加載

在您的示例中，您嘗試像這樣訪問您的 DOM 元素：

const navbarBtn = document.querySelector("navbar__btn");

但是，這是在尋找自定義標簽<navbar__btn> 。 我相信您更有可能正在尋找帶有“navbar__btn”的 class 的標簽，因此您必須添加一個點來引用 class。

const navbarBtn = document.querySelector(".navbar__btn");

Answer 2

要運行 jquery 代碼，它必須始終包含在 $() 中，您在 navbarBtn.addEventListener("click", function () {

嘗試這個：

const navbarBtn = document.querySelector("navbar__btn");
const navbarLinks = document.querySelector("navbar__links");
$(navbarBtn).addEventListener("click", function () {
let value = navbarLinks.classList.contains("navbar__collapse");

if (value) {
     navbarLinks.classList.remove("navbar__collapse");
 } else {
 navbarLinks.classList.add("navbar__collapse");
    } 
});

此外，您真的不需要 addEventListener function，因為 Jquery 會自動檢測您是否單擊按鈕。

此代碼也應該有效：

$(navbarBtn).on('click,function(){ 
    // your logic here
});

Answer 3

問題是，它沒有找到您嘗試將事件附加到的節點。 所以它必須與document.querySelector()方法的工作相關聯。

您可能想要發送節點的id或class ，但這不是傳遞id和class值的正確方法。

您應該將代碼重寫為

// If you are passing id    
const navbarBtn = document.querySelector("#navbar__btn");
const navbarLinks = document.querySelector("#navbar__links");


// If you are passing class
const navbarBtn = document.querySelector(".navbar__btn");
const navbarLinks = document.querySelector(".navbar__links");

請記住，如果您將class作為參數傳遞，您將獲得第一個元素。