0

I have js in my header that checks local storage and sets the stylesheet accordingly. I am using a Bootstrap navbar and I want the navbar to change to inverse colour depending on the local storage too but I can't get it to work. I think it is because the navbar code is in the body.

Code in the head section below:

<script>
    if (localStorage.getItem("theme") == "light") {
        document.getElementById("maincss").href = "./css/main.css";
    } else if (localStorage.getItem("theme") == "dark") {
        document.getElementById("maincss").href = "./css/dark.css";
    } else {
        document.getElementById("maincss").href = "./css/main.css";
    };
</script>

Code in the body section below:

<nav class="navbar navbar-default navbar-fixed-top" id="navbarid">

I want to change the navbar to navbar inverse using the bootstrap class "navbar-inverse" if localStorage is "dark".

I just cannot work out how to run something on page load that checks the localstorage (as in the head section) and changes the nav class (in the body section).

Any guidance appreciated. Thanks.

Leonard Bassoon
  • 63
  • 1
  • 8

2 Answers2

1

Why did not assign class also with something like

document.getElementById("navbarid").className += "navbar-inverse"

and remove it in other case

document.getElementById("navbarid").className.replace
  ( /(?:^|\s)MyClass(?!\S)/g , '' )

Check the link for other class-code examples: Change an element's class with JavaScript

Community
  • 1
  • 1
Daniel
  • 611
  • 5
  • 20
  • thanks. I'm trying to change the class on page load and I'm not sure how to run the script by default at page load but after the navbar code has been executed – Leonard Bassoon Jan 21 '17 at 15:49
1

code in a <script> tag is effectively run in-place during parsing of the page, so since it is in the head section, your navbar hasn't been parsed yet.

what you want is to have your script as a function, an call it on document load for example.

<script>
function checkStorage(){
    if (localStorage.getItem("theme") == "light") {
        document.getElementById("maincss").href = "./css/main.css";
    } else if (localStorage.getItem("theme") == "dark") {
        document.getElementById("maincss").href = "./css/dark.css";
    } else {
        document.getElementById("maincss").href = "./css/main.css";
    };
}
</script>

that function can then be called after your navbar is ready. Most javascript libraries provide that functionnality, for example in jQuery $(document).ready(checkStorage); would be enough. I bet bootstrap has something like it too. But I recommend that you try understanding what happens by trying with these simple vanilla solutions :

<nav class="navbar navbar-default navbar-fixed-top" id="navbarid">
<script>checkStorage();</script>

and

<body onload="checkStorage()" >
...

Can you predict what happens with both of these?

Boris
  • 1,161
  • 9
  • 20
  • Thank you. I get the checkStorage() function part. Before I try and implement it, to answer your question, I think that the script will check the local storage after the navbar has loaded in the first one. So I would be able to add code to change the class in the function. In the second one, I assume it will run when the body loads, but is that before the body starts loading or after it has finished loading? I'll try them both out. – Leonard Bassoon Jan 21 '17 at 16:11
  • good call :). That's actually after the page and assets are loaded (assets being `src="..."` of images and `href` of css link tags for example). – Boris Jan 21 '17 at 16:27
  • http://www.w3schools.com/jsref/event_onload.asp. But jquery's onready is probably what you'll want in the end – Boris Jan 21 '17 at 16:29
  • 1
    Got it working with the function and onload. Thank you. I upvoted it but need more 'reputation' for it to show! – Leonard Bassoon Jan 21 '17 at 16:44
  • No problem, it'll show one day . I got the rep points anyway. Happy coding ! Btw have a look at Daniel's answer, because loading a full new CSS file seems inefficient, instead of simply changing class. – Boris Jan 21 '17 at 16:50
  • I'm using different stylesheets depending on the theme chosen by the user, light and dark. It changes quite a few elements so I thought it would be more efficient simply changing to another stylesheet rather than writing code to change each and every class. I'll give Daniel's solution some thought though. – Leonard Bassoon Jan 22 '17 at 16:49