I am just starting to learn JS, can someone tell me where my mistake is?
I want to display a cookie popup if the "TechStatCookie" is not present, and then (depending on the selection) set the analytics cookie.
I also tried to load the code to show/hide the banner separately in the head. The rest I load after. But that does not work either
Error from Firefox:
TypeError: document.getElementById(...) is null
<anonymous> https://example.com/popup.js:5
Uncaught TypeError: _yesCookie is not a function
onclick https://example.com/:1
example.com:1:1
onclick https://example.com/:1
JS:
try {
if (!document.cookie.split('; ').find(row => row.startsWith('TechStatCookie'))) {
document.getElementById("CookiePopup").style.display = "none";
console.log("TechStatCookie detected -> Popup hide " now.toUTCString());
} else {
document.getElementById("CookiePopup").style.display = "block";
console.log("TechStatCookie not detected -> Popup show " now.toUTCString());
}
function _yesCookie() {
var now = new Date();
now.setTime(now.getTime() 2419200000);
document.cookie = "YesCookie = set; expires=; path=/; SameSite=Strict; Secure" now.toUTCString();
document.cookie = "TechStatCookie=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict; Secure";
document.cookie = 'NoCookie=; Max-Age=-99999999; path=/; SameSite=Strict; Secure';
window.ga = window.ga || function() {
(ga.q = ga.q || []).push(arguments)
};
ga.l = new Date;
ga('create', 'UA-XXXXXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
var gascript = document.createElement("script");
gascript.async = true;
gascript.src = "https://www.google-analytics.com/analytics.js";
document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);
console.log("Tracking enabled! " now.toUTCString());
document.getElementById("CookiePopup").style.display = "none";
}
function _noCookie() {
var now = new Date();
now.setTime(now.getTime() 604800000);
document.cookie = "NoCookie = set; expires=; path=/; SameSite=Strict; Secure" now.toUTCString();
document.cookie = "TechStatCookie=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict; Secure";
document.cookie = 'YesCookie=; Max-Age=-99999999; path=/; SameSite=Strict; Secure';
console.log("Tracking disabled... " now.toUTCString());
document.getElementById("CookiePopup").style.display = "none";
}
} catch (err) {
console.log(err);
}
Html:
<section id="CookiePopup">
<br>
<h1>Datenschutz</h1><br>
<embed src="https://example.com/update.html" width="100%" height="250px">
<p>blablabla</p>
<br>
<button onclick='_yesCookie()' title="OK"><i ></i></button>
<button onclick='_noCookie()' title="NEIN"><i ></i></button>
</section>
Css:
section#CookiePopup {
display: block;
z-index: 1001;
position: fixed;
color: rgb(212, 212, 212);
background: black;
text-align: center;
font-size: .66em;
line-height: 2em;
opacity: .95;
width: 50%;
height: 60%;
min-height: 591px;
top: 12px;
transform: translateX(50%);
border-radius: 25px;
}
section#CookiePopup p {
display: block;
font-size: 15px;
}
section#CookiePopup h1 {
display: block;
color: rgb(255, 60, 0);
font-family: 'Notable', sans-serif;
font-style: bold;
letter-spacing: 3px;
font-size: 25px;
}
section#CookiePopup button.ycookie, section#CookiePopup button.ncookie {
background-color: hsla(103, 94%, 58%, 0.300);
border: none;
color: rgb(103, 248, 46);
text-align: center;
width: 50%;
text-decoration: none;
display: block;
float: left;
font-size: 50px;
}
section#CookiePopup button.ycookie {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
}
section#CookiePopup button.ncookie {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
background-color: hsl(0, 100%, 56%, 0.300);
color: rgb(255, 30, 30);
}
section#CookiePopup button.ycookie:hover {
background-color: hsl(103.1, 94.4%, 58%, 0.5);
}
.fa-check-circle:hover {
color: black;
}
section#CookiePopup button.ncookie:hover {
background-color: hsl(0, 100%, 56.1%, 0.5);
}
.fa-times-circle:hover {
color: black;
}
section#CookiePopup button.ycookie:active, section#CookiePopup button.ncookie:active {
transform: scale(.95);
}
section#CookiePopup:hover {
opacity: 1;
}
@media only screen and (max-width: 600px) {
section#CookiePopup{
top: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 100% !important;
transform: translateX(0%) !important;
}
}
@media only screen and (max-width: 1050px) {
section#CookiePopup{
width: 85%;
transform: translateX(8.9%);
}
}
CodePudding user response：
It seems you didn't import the JS file in html.
<script src="./example.js"></script>
CodePudding user response：
TypeError: document.getElementById(...) is null
<anonymous> https://example.com/popup.js:5
For the above error, you need to add example.js script tag at the bottom of your HTML page
Uncaught TypeError: _yesCookie is not a function
onclick https://example.com/:1
example.com:1:1
To fixed the second error you need to remove try & catch block
CodePudding user response：
ok my js looks like this now:
document.onload = function() {
if (!document.cookie.split('; ').find(row => row.startsWith('TechStatCookie'))) {
document.getElementById("CookiePopup").style.display = "none";
console.log("TechStatCookie detected -> Popup hide " now.toUTCString());
} else {
document.getElementById("CookiePopup").style.display = "block";
console.log("TechStatCookie not detected -> Popup show " now.toUTCString());
}
}
function _yesCookie() {
var now = new Date();
now.setTime(now.getTime() 2419200000);
document.cookie = "YesCookie = set; expires=; path=/; SameSite=Strict; Secure" now.toUTCString();
document.cookie = "TechStatCookie=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict; Secure";
document.cookie = 'NoCookie=; Max-Age=-99999999; path=/; SameSite=Strict; Secure';
window.ga = window.ga || function() {
(ga.q = ga.q || []).push(arguments)
};
ga.l = new Date;
ga('create', 'UA-XXXXXXXXXX-X', 'auto');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
var gascript = document.createElement("script");
gascript.async = true;
gascript.src = "https://www.google-analytics.com/analytics.js";
document.getElementsByTagName("head")[0].appendChild(gascript, document.getElementsByTagName("head")[0]);
console.log("Tracking enabled! " now.toUTCString());
document.getElementById("CookiePopup").style.display = "none";
}
function _noCookie() {
var now = new Date();
now.setTime(now.getTime() 604800000);
document.cookie = "NoCookie = set; expires=; path=/; SameSite=Strict; Secure" now.toUTCString();
document.cookie = "TechStatCookie=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=Strict; Secure";
document.cookie = 'YesCookie=; Max-Age=-99999999; path=/; SameSite=Strict; Secure';
console.log("Tracking disabled... " now.toUTCString());
document.getElementById("CookiePopup").style.display = "none";
}
Html:
<script src="./example.js"></script> <!-- was already in the head, I had forgotten -->
<section id="CookiePopup">
<br>
<h1>Datenschutz</h1><br>
<embed src="https://example.com/update.html" width="100%" height="250px">
<p>blablabla</p>
<br>
<button onclick='_yesCookie()' title="OK"><i ></i></button>
<button onclick='_noCookie()' title="NEIN"><i ></i></button>
</section>
But now the popup is also displayed with the "TechStatCookie" cookie. I'm getting desperate