2

I added dark mode to a website, and added a .js to save the setting the person choose. It works perfectly in all the pages on the same level as index, but every page with its own folder, does not get the saved setting in firefox. It works perfectly in Chrome. Here the javascript that I used:

document.addEventListener('DOMContentLoaded', function () {
  const checkbox = document.querySelector('.dark-mode-checkbox');

  checkbox.checked = localStorage.getItem('darkMode') === 'true';

  checkbox.addEventListener('change', function (event) {
    localStorage.setItem('darkMode', event.currentTarget.checked);
  });
});

In the pages in the folders I used <script src="../js/darkmode.js"></script>. How to have the setting they choose work on the whole page?

Volkan
  • 31
  • 6
  • 1
    Strange. It seems to work for me. What do you mean by each page having its own folder? – theusaf Oct 05 '19 at 19:30
  • @theusaf Here is a example of my folder layout https://i.imgur.com/svc02N6.png – Volkan Oct 05 '19 at 19:40
  • When you check localstorage on one of the pages that don't work, does it contain the darkMode key? – Steven Kuipers Oct 05 '19 at 19:55
  • I still cannot reproduce the issue. Perhaps it is due to the browser you are using? – theusaf Oct 05 '19 at 20:00
  • @theusaf I tried Chrome, and it works. I use Firefox. Why doesn't it work there? – Volkan Oct 05 '19 at 20:13
  • Not sure why Firefox works differently from Chrome, but using `document.cookie` seems to work. – theusaf Oct 05 '19 at 20:21
  • @theusaf How do I implement that into my code? I'm pretty new to JS. – Volkan Oct 05 '19 at 20:32
  • take a look at some examples of [setting cookies](https://stackoverflow.com/questions/532635/javascript-cookie-with-no-expiration-date). Hopefully, this should help you. – theusaf Oct 05 '19 at 20:34
  • @theusaf I don't really get how to convert this to use `document.cookie`. In what way can I add it to this code? – Volkan Oct 05 '19 at 21:06
  • For example, you could set a cookie using `document.cookie = "darkmode=true;path=/;"` and then get the cookie using something like `document.cookie.split("darkmode=")[1].split(";")[0]` – theusaf Oct 05 '19 at 21:20

2 Answers2

2

The problem is with the relative inclusion path of the JavaScript. Your JavaScript is not being included in the sub-pages since they are in sub-directories. So your relative path will be broken.

Your JavaScript code seems to be fine otherwise (though you didn't include the part that activates dark mode, so I'm assuming that works correctly by the fact that the index-level pages work).

Change

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

To

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

(Or whichever absolute path is necessary.)

You can use the HTML base tag in the <head> element to change which path functions as the 'top-level' path.

E.g.

<base href="http://www.example.com/some/sub/path/">
Jochem Kuijpers
  • 1,770
  • 3
  • 17
  • 34
  • I tried it, but the setting that I set at the home page does not get used in the pages with seb-directories. The pages on the same level as the main index do get the same setting applied.The base tag does also not work. – Volkan Oct 06 '19 at 10:50
  • @Volkan What is the URL of the index page and what is the (absolute) URL of the .js file? You can substitute the domain with `www.example.com`, that part shouldn't matter to get the point across. – Jochem Kuijpers Oct 07 '19 at 00:24
  • Main index is /index.html and the js file is /js/darkMode.js. the indexes that are not working are from the sub-pages like /news/index.html. the script gets loaded, but the setting is saved separately. But in chrome it works flawlessly. – Volkan Oct 07 '19 at 05:39
  • @Volkan note that you have `darkMode.js` while the script tag in my answer has `darkmode.js`. Can you try changing the capitalization of either, so it matches? – Jochem Kuijpers Oct 07 '19 at 12:30
0

After some testing, I figured out that I opened the website locally and that's why it didn't work. After opening it in localhost it worked fine on Firefox and Chrome. It saved the setting even in subdirectories.

Studocwho
  • 2,404
  • 3
  • 23
  • 29
Volkan
  • 31
  • 6