(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

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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

<!-- language: lang-html -->

<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>

<!-- end snippet -->

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.

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
}

</details>



# 答案2
**得分**: 0

您遇到的问题是在加载时主题为空，如果未设置主题。

对于我的回答，我简化了您的代码，将一个dark类切换到body并使用一个单一的链接来切换主题。

body的默认主题设置为浅色主题。我检查darkMode是否存在，如果不存在，将darkMode变量设置为false，表示它处于浅色模式。

如果是darkMode，则向body添加dark类。如果不是暗模式，则不需要执行任何操作。

然后，我附加了一个点击处理程序到您的链接，以便在点击时告诉它要执行什么操作。通过切换dark类，它将要么添加它，要么删除它。

我还将darkMode设置为body是否包含darkMode类（true/false）。

```html
<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")));
});

<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")));
});