javascript - Darkmode Custom CSS Toggler - Uncaught TypeError

admin管理员组

文章数量:1122826

I'm trying to implement a Dark Mode toggle on a WordPress site as per this CodePen from CSS Tricks.

I know my CSS is all correct. I'm targeting #main instead of body, and it's switching based on my OS preference as I'd expect.

The button is a simple toggle as shown in the example:

<button class="btn-toggle">Toggle Dark-Mode</button>

However I keep getting an Uncaught TypeError: Cannot read property 'addEventListener' of null

I've tried placing the following script in the header, and also right underneath the button, but it isn't catching the button's click no matter what.

const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
btn.addEventListener("click", function () {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
} else {
document.body.classList.toggle("dark-theme");
}
});

The only thing I can guess is that the document.querySelector(".btn-toggle") isn't the correct syntax for WordPress. Any suggestions for getting the JS to work in the header would be grand!

I'm trying to implement a Dark Mode toggle on a WordPress site as per this CodePen from CSS Tricks. https://codepen.io/adhuham/pen/GRJxpQr

I know my CSS is all correct. I'm targeting #main instead of body, and it's switching based on my OS preference as I'd expect.

The button is a simple toggle as shown in the example:

<button class="btn-toggle">Toggle Dark-Mode</button>

However I keep getting an Uncaught TypeError: Cannot read property 'addEventListener' of null

I've tried placing the following script in the header, and also right underneath the button, but it isn't catching the button's click no matter what.

const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
btn.addEventListener("click", function () {
if (prefersDarkScheme.matches) {
document.body.classList.toggle("light-theme");
} else {
document.body.classList.toggle("dark-theme");
}
});

The only thing I can guess is that the document.querySelector(".btn-toggle") isn't the correct syntax for WordPress. Any suggestions for getting the JS to work in the header would be grand!

• javascript

Share Improve this question asked Feb 5, 2021 at 14:05 netheavynetheavy 1 2

• Are you 100% certain that the button exists in the HTML and is created before your JS code is executed? – kero Commented Feb 5, 2021 at 15:21
• That was my thought too - I've tried 3 different methods of deferring the JS script and none of them have resolved the issue. – netheavy Commented Feb 8, 2021 at 8:41

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Wrap your JS function with the 'on-load' event. That will load the script after the entire page has loaded, and then your code will be able to find the button in the document.

See here for info about this: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event .

本文标签： javascriptDarkmode Custom CSS TogglerUncaught TypeError