u/ParticularOkra7432

This post contains content not supported on old Reddit. Click here to view the full post

This post contains content not supported on old Reddit. Click here to view the full post

So I've decided to make yet another website (I already have 2), and this one is one I am trying to implement a light/dark mode on. I had spent some time looking, found an explanation that provided code and was able to get a button that works (on only one page). I'm still in the process of making the pages, but I have the index and one page that is in a folder (I'm using codehs btw).

I was able to have the button work on the menu (it changed the background color, meaning it worked), but when copying the button code to the other page (adding a ../ before the name of the Javascript file [script.js]), it doesn't work! Or, well, it does, but instead of switching over to using the dark-style.css, it just gets rid of my CSS entirely! I have spent hours tweaking small things, trying to get it to work, and all that time just made the button activate, but get rid of all my CSS.

My button's code is this on the page it removes the CSS on:

<button class="btn-toggle">Mode Switch!</button>

<script src="../script.js"></script>

And they are right beside each other cause like, uhhh I don't exactly know where else the script thing should go.

And this is the code I had copied from the explanation page:

// Select the button

const btn = document.querySelector(".btn-toggle");

// Select the stylesheet <link>

const theme = document.querySelector("#theme-link");

// Listen for a click on the button

btn.addEventListener("click", function() {

// If the current URL contains "ligh-theme.css"

if (theme.getAttribute("href") == "light-style.css") {

// ... then switch it to "dark-theme.css"

theme.href = "dark-style.css";

// Otherwise...

} else {

// ... switch it to "light-theme.css"

theme.href = "light-style.css";

}

});

What could I possibly be doing wrong :( I have a funny feeling that the first explanation on this post is going to be so glaringly obvious I'll wonder why I hadn't thought of it before