Javascript functions not working when deployed

Support
1

Hi!
I got a problem with a simple front-end challenge using html, css & javascript.

In local/dev environment, my theme switch button works fine, but here when deployed, clicking the theme button doesn’t change the html element class, so the theme doesn’t change for some reason.
What could be the issue?

Site: https://calculator-app-jrmydix.netlify.app/
Repo: frontend-practice/frontend-mentor/calculator-app at main · jrmydix/frontend-practice · GitHub

Thanks.

2

Hey there, @jeremy :wave:

Thanks for reaching out and welcome to the Netlify Forums! Sorry to hear you are encountering problems. Can you please share the name of the function you are using?

Additionally, can you describe what elements of the theme should be changing when we toggle the theme switch button?

Thanks!

1 Like
4

Hi, when you toggle the theme switch button, the whole page colors should change, a class like “dark”, “light”, or “third” should be added to the html element when a theme is chosen.
When I said functions, I meant my javascript file content. Only the calculator part is working but the theme switch should too (at least it does work on local environment so not sure why it wouldn’t)

5

Hello @jeremy,

Looking at your code, I don’t know if there are other issues preventing your code from working but I do see a few issues. It’s worth noting these are not related to Netlify’s services but I’m happy to review!

  1. The click handlers will only change the theme if something is set on the localStorage variable. By default, nothing is set on that variable. So when you click a button is checks localStorage.theme and does not have an else condition to perform a default action if nothing is set on theme.

  2. The site is using localStorage incorrectly. localStorage has .getItem( key ) and .setItem( key, value ) functions that you can call to persist values that can be read across page loads. By setting those properties directly on localStorage as written: localStorage.theme that will just set a theme property on the object which doesn’t persist across page loads.

Here’s some more information on localStorage: Window.localStorage - Web APIs | MDN

I hope that helps!

2 Likes
6

Thank you very much!
Sorry I’m still very new to javascript.
And as it was working locally I wasn’t sure where the issue was coming from.

Have a nice day! :slightly_smiling_face:

2 Likes