用于 cookie 弹出窗口的损坏的 addEventListener 方法

Question

我需要有关如何修复我网站的 js cookie 代码中的 addEventListener 函数的建议。 cookie 弹出窗口总是出现，但当我单击同意按钮时，它不会消失，也不会写入本地存储。控制台给我这样写：“未捕获的类型错误：无法读取 null 的属性 'addEventListener'”。我希望有人能帮我解决这个问题，我不知道该如何处理。正文下方是js代码和html代码。

JS代码：

const cookieContainer = document.querySelector(".cookie-container");
const cookieButton = document.querySelector(".cookie-btn");

cookieButton.addEventListener("click", () => {
  cookieContainer.classList.remove("active");
  localStorage.setItem("cookieBannerDisplayed", "true");
});

setTimeout(() => {
  if (!localStorage.getItem("cookieBannerDisplayed")) {
    cookieContainer.classList.add("active");
  }
}, 2000);

HTML代码：

<div class="cookie-container">
        <p>
            Používáním této stránky souhlasíte s ukládáním souborů cookies a sběrem dat.
        </p>
        <button class="cookie-btn">Souhlasím</button>
    </div>

Answer 1

建议：

if(cookieButton) {
  cookieButton.addEventListener("click", () => {
    cookieContainer.classList.remove("active");
    localStorage.setItem("cookieBannerDisplayed", "true");
  });
}

// Edit:
setTimeout(() => {
  if (!localStorage.getItem("cookieBannerDisplayed")) {
   if(cookieContainer)
    cookieContainer.classList.add("active");
  }
}, 2000);

我假设如果被接受，您的 div 不在页面的 dom 中。所以找不到你的按钮。

<div class="cookie-container">
...
</div>

Answer 2

您需要将容器的默认显示设置为none，只有当它有活动的class.

时才设置为block

Demo

用于 cookie 弹出窗口的损坏的 addEventListener 方法

Broken addEventListener method for cookie popup

html

javascript

addeventlistener