What happens if I use sessionStorage.getItem(“data-theme”); if “data-theme” has not been defined yet?

I grabbed javascript code from the internet that creates a button to toggle dark mode on and off and it works perfectly fine. Here I’ll paste only the relevant chunk of what I’ve written so far:

    <script>
    // Wait for document to load
    document.addEventListener("DOMContentLoaded", function(event) {
    
    //store in a variable whatever the data-theme is in the sessionStorage
    var sessionVariable = sessionStorage.getItem("data-theme");
    
    /*
    // if it doesnt exist (which is null, i think) then it sets the data-theme value to light
    if string(sessionVariable) == "null"{
        document.documentElement.setAttribute("data-theme", "light");   
    // if it does exist, which means data-theme is either dark or light, then it sets it to that
    } else{
    document.documentElement.setAttribute("data-theme", string(sessionVariable))
    }
    */
    document.documentElement.setAttribute("data-theme", "light") //THIS IS THE LINE THAT WORKS, I WOULD LIKE TO REMOVE IT FOR THE COMMENTED OUT CODE ABOVE

    // Get our button switcher
    var themeSwitcher = document.getElementById("theme-switcher");

    // When our button gets clicked
    themeSwitcher.onclick = function() {
    
    // Get the current selected theme, on the first run  it should be `light`
    var currentTheme = document.documentElement.getAttribute("data-theme");
    
    // Switch between `dark` and `light`
    var switchToTheme = currentTheme === "dark" ? "light" : "dark";
    
    sessionStorage.setItem("data-theme", "currentTheme"); //store in the sessionStorage whatever the data-theme's value is (the currentTheme)

    // Set our current theme to the new one
    document.documentElement.setAttribute("data-theme", switchToTheme);
    }
  });
</script>

It’s all commented and pretty. You can check it out at pepesito1.github.io/test/general.html. The button works fine.

Now what I’m trying to do is add sessionStorage functionality to it. As you can see at the beginning I commented out a huge chunk of code: I think that should work but it doesnt, and the original unedited line that I grabbed from the internet is the one I said I want to replace.

So, my logic is, when the page is opened for the first time, clearly there is no “data-theme” stored on the sessionStorage. And when the second javascript line tries to getItem(“data-theme”), it should return “null”, right?. Then I make it so that if data-theme is null (which means its not been defined yet) it sets the theme to light (default mode), but if it is indeed defined then it sets it to whatever it is (either light or dark)

Yet when I erase the line that I want to delete and un-comment out that chunk of code, the button stops working alltogether. I suppose its because theres something wrong with my “if” statements. What is it? Is the sessionVariable not “null” when its not been defined yet?

Answer

The following line

if string(sessionVariable) == "null"{

should be changed to

if (sessionVariable === "null"){

Advertisement

Answer