using javascript?

Question

So i have a sepereate page, where the user can click a button to change the style sheet of the website, which will change all the style sheets of each page to the one they have chosen.

External Javascript file:

       function ChangeSheet(sheet)
    {

        document.getElementById('pagestyle').setAttribute('href', sheet);

    }


    pages = {

         default : 0;
         design1 : 0;
         design2 : 0;


    }

    function setDefault(var num){

        pages.default = num;
    }

Html Code for when user clicks the button to change css:

<p>Click one of the links to change the website design viewing settings.</p>

            <button onclick="setDefault(1)">Default</button>

Number 1 is saved within pages class, meaning that the user picked this one. basically a bool.

Embedded Javascript in html file, this shows the link id, as well importing the external javascript file. I then try to use internel js to check if pages.deafult is 1, if so, then we change to stylesheet 'design1.css':

<link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css">

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

    <script type="text/javascript">
        if(pages.default == 1)
        {
            ChangeSheet('design1.css');

        }

    </script>

However when i press the button, nothing happens, and im not sure why? Sorry if im not supposed to ask this, i'm very new to website design and javascript.

your `if()` only runs on page load. It's not going to run again just because you change the `default` with your button. Also javascript has no persistence between page loads. You need to store that object somewhere...server, cookie or localStorage — charlietfl, Apr 22 '17 at 17:08
Your javascript is checking if pages.default is equal to 1 before you click the button. When you click the button, it is changing pages.default to 1, but never doing the check again. — Joe Lissner, Apr 22 '17 at 17:08
I have updated my answer to address your update. (It echoes charlieftl's point that you need persistence between page loads but provides a solution even if you're running your HTML and JS directly off of your file system.) — nb1987, Apr 22 '17 at 18:49

score 0 · Answer 1 · answered Apr 22 '17 at 17:12

Perhaps, instead of changing the attribute of the link tag, maybe you're better off by simply setting a specific class to your body tag so the CSS applied changes according to it?

How big are your CSS themes? I don't think having a CSS theme adding extra 5-10KB max of minified CSS is a bad practice these days, anyways.

By modifying the body className you won't have to resort to hacky-looking solutions like the above.

score 0 · Answer 2 · answered Apr 22 '17 at 18:36

If you have to use external file it will be included to your document at the server because sending it to the client so it will not change until the page loaded again the best way to change the style at the client side is to change the values with in JavaScript function itself or try something to reload your page.

score -1 · Accepted Answer · edited May 23 '17 at 12:17

The issue is that your embedded script is going to execute immediately when the page loads (or even before the page loads, since it looks as though you're placing it in the <head> of the document). And since at that time pages.default does not equal 1, nothing will happen. To fix, you could simply update your click handler to invoke ChangeSheet:

<button onclick="ChangeSheet('design1.css')">Default</button>

EDIT: I see your update. As another user mentioned in a comment, you will need to use some kind of persistence mechanism to store the user's preferred stylesheet. However, if you're following that tutorial in the YouTube video, then you're probably running your HTML and JavaScript from your local file system (the file:/// protocol), so presumably you can't use cookies or localStorage and you don't have a server to store the user's preference on. Your options for persistence are extremely limited, but you can use the window.name property to persist some data (see Javascript/HTML Storage Options Under File Protocol (file://)). This is not the best solution (it's kind of a hack) but it's probably the only one that will work for your example.

HTML (and embedded JS):

<!doctype html>
<html>
<head>
    <link id = "pagestyle" rel="stylesheet" type="text/css" href="default.css">
    <script src="./swap.js"></script>
    <script type="text/javascript">
       if (window.name) {
            ChangeSheet(window.name);
        }
    </script>
</head>
<body>
    <button onclick="ChangeSheet('design1.css')">Design 1</button>
    <button onclick="ChangeSheet('design2.css')">Design 2</button>
</body>
</html>

swap.js:

function ChangeSheet(sheet)
{
    window.name = sheet;
    document.getElementById('pagestyle').setAttribute('href', sheet);

}

design1.css (of course you can change to whatever styles you want) :

body {
    background-color: blue;
}

design2.css (of course you can change to whatever styles you want):

body {
    background-color: red;
}

After setting one of the styles, try refreshing the page, and notice that your style preference persists, or if you have other pages to load you can try navigating back and forth between them.

Thank you so much, I tried this way previously, but without the window.name. Thanks for the time and the guidance. — , Apr 22 '17 at 20:35

using javascript?

3 Answers3