Question 190943 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – (JS) getElementByID logic doesn't work in IF statement, but works as a function

Attempting to set up a simple dark mode function that persists. The dark mode itself works, but can’t hide button display (they will only hide once clicked on and the function is triggered).

Edit: I should clarify – the issue I am having is getting the button to stay hidden on refresh/when I click to a different page. The dark mode remains (black background & white text) but the button reappears until I click it again.

In my console I am getting the following error – Uncaught TypeError: Cannot read properties of null (reading ‘style’)
at js:27:36

Apologies I am new to JavaScript

var body = document.querySelector("body");

var theme = localStorage.getItem('darkmode');


function dark() {
  body.style.color = 'white';
  body.style.backgroundColor = 'black';
  document.getElementById('dark').style.display = 'none';
  document.getElementById('light').style.display = 'block';
  localStorage.setItem('darkmode', true);
}

function light() {
  body.style.color = 'black';
  body.style.backgroundColor = 'white'
  document.getElementById('light').style.display = 'none';
  document.getElementById('dark').style.display = 'block';
  localStorage.setItem('darkmode', false);
}

if (theme == "true") {
  body.style.color = 'white';
  body.style.backgroundColor = 'black';
  document.getElementById('dark').style.display = 'none';
  document.getElementById('light').style.display = 'block';
} else if (theme == "false") {
  body.style.color = 'black';
  body.style.backgroundColor = 'white'
  document.getElementById('light').style.display = 'none';
  document.getElementById('dark').style.display = 'block';
}
<a id='dark' class='navbar-link' href="#" onclick="dark()" role="button">Darkmode!</a>
<a id='light' class='navbar-link' href="#" onclick="light()" role="button">Lightmode!</a>

Seems to be a getElementByID issue as the rest of the if function works as expected, not sure if this has to be triggered by a function call or if there is an alternative.

Tags:

2

Answers


  1. 0

    The issue is that theme has no value until a button is clicked. When the code runs for the first time darkmode is not set in local storage and therefore it will be undefined, which is not equal to 'true' or 'false'.

    The quick fix is to change whichever value you want to be the default’s conditional

    if (theme === 'true' || theme === undefined)` {
// show light mode
}

    OR

    if (theme === 'false' || theme === undefined') {
// show dark mode
}

    My suggestion though is to instead set the value theme in local storage "dark mode" to delete it when in default

    var theme = localStorage.getItem('theme');
function Dark() {
...
localStorage.setItem('theme','darkmode');
}
function Light() {
localStorage.removeItem('theme')
}

if (theme === 'darkmode') {
// show dark
} else {
 // show light
}
    Login or Signup to reply.
  2. 0

    The problem that you are experiencing is theme is empty on load if it wasn’t set.

    For my answer I simplified your code to toggle a dark class on body and use a single link that toggles the theme.

    The body’s default theme is set as the light theme. I check to see if darkMode exists and if not, set darkMode variable to false to indicate it’s in light mode.

    If it is darkMode add the dark class to body. If not dark mode, we don’t need to do anything.

    Then I attach a click handler to your link so we can tell it what to do on click. By toggling the dark class, it will either add it or remove it.

    I also set the darkMode to if body contains the darkMode class or not (true/false).

    <a class='navbar-link btn-ToggleTheme' href="#" role="button">Change Theme</a>

body{
  color:#000;
  background:#fff;
}

body.dark{
  color:#fff;
  background:#000;
}

const toggleBTN = document.querySelector(".btn-ToggleTheme")
const body = document.body;

const darkMode = localStorage.getItem("darkMode") || false;
if(darkMode)body.classList.add("dark")

toggleBTN.addEventListener("click",(e) => {
    body.classList.toggle("dark");
    localStorage.setItem('darkMode',(body.classList.contains("dark-mode")));
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search