jQuery click function with localStorage not working (may be!)

JavaScript
1

My website theme preference cookie settings for a link not loading after the page reload. Here’s how the HTML of the element looks like:

<li class="menu-item theme-item">
  <a href="javascript:void()" class="btn" aria-pressed="false">Theme Toggle</a>
</li>

And here’s how the jQuery function for this element is set:

$('.theme-item .btn').on('click', function(e) {
    e.preventDefault();
    $(this).attr('aria-pressed', $(this).attr('aria-pressed') === 'false' ? 'true' : 'false');
    $('html').attr('data-theme', $('html').attr('data-theme') === 'dark' ? 'light' : 'dark');

    if ('false' === $(this).attr('aria-pressed')) {
        localStorage.setItem('themeChoice', 'dark');
    } else {
        localStorage.setItem('themeChoice', 'light');
    }
});

var isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

if ('dark' === localStorage.getItem('themeChoice')) {
    isDarkMode = true;
} else if ('light' === localStorage.getItem('themeChoice')) {
    isDarkMode = false;
}

if (isDarkMode) {
    $('html').attr('data-theme', 'dark');
    $('.theme-item .btn').attr('aria-pressed', 'true');
} else {
    $('html').attr('data-theme', 'light');
}

The problem with this code is, it’s not saving toggled value, and the theme preference not loading after the page reloads, the link clicks changing HTML attribute without any problem, but after page reload preference disappears!

Can anyone fix the problems in this code? Thanks in advance!

3

So i’m confused. And I think you might be too.

if (isDarkMode) {
    $('html').attr('data-theme', 'dark');
    $('.theme-item .btn').attr('aria-pressed', 'true');

So, you’re saying that if the color is supposed to be dark, then aria-pressed should be TRUE.

if ('false' === $(this).attr('aria-pressed')) {
        localStorage.setItem('themeChoice', 'dark');

but this says the opposite; it sets the localstorage to dark if aria-pressed is FALSE.

3 Likes
4

That probably took you a few seconds to work out but took me ages :slight_smile: (especially as the code snippet seemed to change half way through).

I need the practice anyway :wink:

5

It did not. I actually spent a good 15 minutes or so simplifying the code so that my head could make easier sense out of it. Repeated jQuery calls can mess with me.
For example;

$('.theme-item .btn').on('click', function(e) {
    e.preventDefault();
    $(this).attr('aria-pressed', $(this).attr('aria-pressed') === 'false' ? 'true' : 'false');
    $('html').attr('data-theme', $('html').attr('data-theme') === 'dark' ? 'light' : 'dark');

    if ('false' === $(this).attr('aria-pressed')) {
        localStorage.setItem('themeChoice', 'dark');
    } else {
        localStorage.setItem('themeChoice', 'light');
    }
});

=>

$('.theme-item .btn').on('click', function(e) {
    e.preventDefault();
   const val = $('html').attr('data-theme') === 'dark' ? 'light' : 'dark';
    $(this).attr('aria-pressed', (val == 'light').toString());
    $('html').attr('data-theme', val);
    localStorage.setItem('themeChoice', val);
}

Calculate once, evaluate often. Much more (imho) readable.

2 Likes
6

Thanks, this does the trick! Your confusion was right (first reply), changing the themeChoice value also worked! You’ve saved my day <3

1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.