JavaScript Think this is JS related- Cookies warning

[Edrol97]

Hi all,

I've managed to make the attached cookie box, but can't seem to get it to work. I think I got the beginner code from W3Schools. Here's the JS. How do I make this work? It should appear on the homepage of my site, and when closed stay on that page. How would I do this?

const consentBox = document.getElementById("consentBox");
const acceptBtn = document.querySelector(".consentButton");
const rejectBtn = document.querySelector(".rejectButton");
acceptBtn.onclick = () => {
  document.cookie = "CookieBy=HouseofLord; max-age=" + 60 * 60 * 24;
  if (document.cookie) {
    consentBox.classList.add("hide");
  } else {
    alert(
      "Cookie can't be set! Please" +
        " unblock this site from the cookie" +
        " setting of your browser."
    );
  }
};
rejectBtn.onclick = () => {
  alert("Cookies rejected. Some functionality may be limited.");
  consentBox.classList.add("hide");
};
let checkCookie = document.cookie.indexOf("CookieBy=HouseofLord");
checkCookie !== -1
  ? consentBox.classList.add("hide")
  : consentBox.classList.remove("hide");

 

[Johna]

It looks like your browser either doesn't support cookies, or your settings disable cookies by default. Is this correct?

 

[Edrol97]

It looks like your browser either doesn't support cookies, or your settings disable cookies by default. Is this correct?

Right, I've managed to get it to work on another browser, where cookies are enabled. How would I link the accept button to show the index.html page or make it so that the cookies notification appears over the index.html file?

 

[Johna]

How would I link the accept button to show the index.html page

You mean after clicking accept, it takes you to index.html? Then you can add window.location = "/index.html"; to the if (document.cookie) conditional.

or make it so that the cookies notification appears over the index.html file?

You could try placing the cookies notification in the index.html and give it position: absolute; and a z-index high enough to be in front of all elements on the page.