How to change the class of an element HTML JavaScript

Question

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/ionicons@5.5.2/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>&#10240;&#10240;&#10240;&#10240;&#10240;&#10240;<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

I think the problem is your html doesn't have a `body` tag. Please share your HTML as well. — ikhvjs, Jul 21 '21 at 13:18
I think you made all newbie's mistake, you put your js script in the HTML head part ... — Mister Jojo, Jul 21 '21 at 13:18
Try using [defer](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer) on your main.js script line. Or put it in the end of the HTML. — thebigfundamentals, Jul 21 '21 at 13:22
@MisterJojo I did make a newbie mistake ‍♂️ well tnx and tnx again for not being mean with me — Mushroom idiot, Jul 21 '21 at 13:22
Proberbly you have to add also an empty `class` attribute to preventing an undefined error. Some browsers behave strange. — Reporter, Jul 21 '21 at 13:26
@Reporter why does everyone answer questions in comments? also the problem was that I had my script tag at the top but tnx anyways — Mushroom idiot, Jul 21 '21 at 13:29
@Mushroomidiot Some reasons for it: The solution is too short for an answer, someone is unsure that solves your problem, or gives you an hint. — Reporter, Jul 21 '21 at 13:32
https://stackoverflow.com/questions/3037725/is-it-wrong-to-place-the-script-tag-after-the-body-tag — Mister Jojo, Jul 21 '21 at 13:52

Lonnie Best · Accepted Answer · 2021-07-21T13:45:06.987

2

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;

edited Jul 21 '21 at 13:45

answered Jul 21 '21 at 13:30

Lonnie Best

9,936
10
57
97

How to change the class of an element HTML JavaScript

1 Answers1