Cannot set property 'className' of null at setThemeFromCookie
-
15-04-2021 - |
Question
I am coding in WordPress to make a button to toggle body class from light-mode
to dark-mode
. i was experimenting with trying to add a cookie so that the preference is remembered for the browser. But i receive a error Cannot set property className of null at setThemeFromCookie
.
moreover clicking the button gives another error (index):486 Uncaught TypeError: Cannot read property 'className' of null at togglePageContentLightDark
My url is https://milyin.com you can see the button in blue color located in footer
JS follows
function togglePageContentLightDark() {
var body = document.getElementById('body')
var currentClass = body.className
var newClass = body.className == 'dark-mode' ? 'light-mode' : 'dark-mode'
body.className = newClass
document.cookie = 'theme=' + (newClass == 'light-mode' ? 'light' : 'dark')
console.log('Cookies are now: ' + document.cookie)
}
function isDarkThemeSelected() {
return document.cookie.match(/theme=dark/i) != null
}
function setThemeFromCookie() {
var body = document.getElementById('body')
body.className = isDarkThemeSelected() ? 'dark-mode' : 'light-mode'
}
(function() {
setThemeFromCookie()
})();
HTML for button
<button type="button" name="dark_light" onclick="togglePageContentLightDark()" title="Toggle dark/light mode">🌛</button>
i am fairly new to Java script and this code was taken from internet only. Please help me debug this code.
Solution
Using JQuery Simplifies the whole thing, using JS Cookie
$(document).ready(function(){
// Check cookie and set theme
if(Cookies.get('theme')) {
$('body').removeClass('light-mode dark-mode').addClass( Cookies.get('theme') );
};
//Switch theme and create the cookie...
$("#theme-toggler").click(function(){
if ($('body').hasClass( 'light-mode')){
$('body').removeClass('light-mode').addClass('dark-mode');
Cookies.set('theme', 'dark-mode');
}else {
$('body').removeClass('dark-mode').addClass('light-mode');
Cookies.set('theme', 'light-mode');
}
});
});
Add id
to button
.
<button id="theme-toggler" type="button" name="dark_light" title="Toggle dark/light mode">🌛</button>
Also add this script
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
OTHER TIPS
var body = document.getElementById('body')
is your problem. The document's body is not an id, it's a tag. Use var body = document.querySelector('body');