I am trying to use cookies to save a user's preference if they like dark mode or light mode. The cookie part is working but when I try changing the class of the body tag when the user loads the page, I get an error. Heres the error:
Main.js:14 Uncaught TypeError: Cannot read property 'classList' of null
at darkmode (Main.js:14)
at Main.js:4
heres my code:
if (this.c == "darkMode=1") { // this.c is a variable storing the cookies
darkmode() // this is line 4
}
function darkmode() { // darkmode() is a function that toggles dark mode on and off
var element = document.body
if(this.darkMode == 1){
element.classList.remove("dark-mode")
this.darkMode = 0 // this.darkmode is a global variable (I think I understand how it works but I dont know the correct words) that stores if dark mode is on or off
setCookie("darkMode", 0, 10) // setCookie is a function that creates a cookie, don't wory it works perfectly fine
} else {
element.classList.add("dark-mode") // this is line 14
this.darkMode = 1
setCookie("darkMode", 1, 10)
}
}
I have tried multiple ways of toggling the class like:
document.body.classList.add("dark-mode") // what I first tried
document.body.classList.toggle("dark-mode") // I tried toggling it instead
document.body.className += 'dark-mode'; // I tried the answer from this question: https://stackoverflow.com/questions/17457583/safe-and-quickest-way-to-add-a-css-class-to-the-body-of-the-dom
but they all resulted with the same error:
Main.js:14 Uncaught TypeError: Cannot read property 'classList' of null
at darkmode (Main.js:14)
at Main.js:4
what I don't understand is that the solutions work when I press the dark mode button but it doesn't work when it loads the website and checks the cookies
I hope this question is detailed enougth for someone to help thanks in advance I have spent many hours trying to fix this problem and dark mode is really important to me as I am a wanna be developer π
EDIT:
html>
<head>
<title> Snake </title>
<link rel="stylesheet" href="../Main.css">
<script src="../Main.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<link rel="icon" type="image/png" href="../Images/icons/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="../Images/icons/favicon/favicon-16x16.png" sizes="16x16" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul>
<li><a href="../Main.html"> Home </a></li>
<li><a href="../Discord.html"> Discord </a></li>
<li><a href="../Bot.html"> Bot </a></li>
<li><a class="active" href="Snake.html"> Game </a></li>
<li><a href="https://www.youtube.com/channel/UCGhRM6SBFpYUI4L-P3EFF7A" target="_blank"> YouTube </a></li>
<ri><button style="border-radius:0" class="dark-button" onClick="darkmode()"><ion-icon name="contrast-outline"></ion-icon></button></ri>
</ul>
<div class="margin">
<h1 align="center"> <ins> Snake Game </ins> </h1>
<p align="center"><a class="score"> </br></a>⠀⠀⠀⠀⠀⠀<a class="hiScore"> </a></p>
<canvas height="800" width="800" class="canvas"> </canvas>
<p align="center"> Ayo this is my snake game enjoy :) </p>
</div>
<footer>
<p > <a href="https://discord.gg/AsA7P9B5Mv" target="_blank" style="color: white">Discord</a> <a href="https://www.youtube.com/channel/UCGhRM6SBFpYUI4L-P3EFF7A" target="_blank" style="color: white">YouTube</a> <a href="mailto:my email was here"style="color: white">EMail</a> Mushroomcraft<sup>TM</sup></p>
</footer>
</body>
<script type="text/javascript" src="fruit.js"></script>
<script type="text/javascript" src="snake.js"></script>
<script type="text/javascript" src="draw.js"></script>
</html>
heres my html I probably leaked some of my private info but I removed the email and I dont care about myself
1 Answer 1
Put your code into a function that gets called only after the html page has loaded, so that you know the body element exists at the time your code runs:
function main()
{
// Code goes here
}
// Execute the code above after the html page has loaded:
window.onload = main;
classattribute to preventing an undefined error. Some browsers behave strange.