Cannot set property 'className' of null at setThemeFromCookie

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.

Answer 1

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>

Answer 2

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');