Time-based style changer

Question

I'm creating a javascript so that at certain times of the day, it changes the layout of the webpage. I also have it set up so that if the style has been manually changed it will change the style on each page.

When clicking on one of the buttons to manually change it and then go onto another page, the style is missing entirely. Can anyone help?

Here is my code

// JavaScript Document
var mode = 0;

function webload() {
    if(mode == 0)
    {
        var d = new Date();
        var n = d.getHours();
        if (7 <= n && n < 18)
        {
            day();
        }
        else
        {
            night();
        }
    }
    elif(mode == 1)
    {
        day();
    }
    elif(mode == 2)
    {
        night();
    }
    elif(mode == 3)
    {
        highcon()
    }
}
function day() {
   document.body.style.background = 'url(images/day_bg_top.png) top scroll no-repeat, url(images/day_bg_bot.png) bottom scroll repeat-x, #53a3ff';
   document.getElementById('spacer').style.background = '#53a3ff';
   document.getElementById('spacer2').style.background = '#53a3ff';
   mode = 1
}
function night() {
   document.body.style.background = 'url(images/night_bg_top.png) top scroll no-repeat, url(images/night_bg_bot.png) bottom scroll repeat-x, #000c36';
   document.getElementById('spacer').style.background = '#000c36';
   document.getElementById('spacer2').style.background = '#000c36';
   mode = 2
}
function highcon() {
    document.body.style.background = 'url(images/night_bg_top.png) top scroll no-repeat, url(images/night_bg_bot.png) bottom scroll repeat-x, #000c36';
    document.getElementById('spacer').style.background = '#000c36';
    document.getElementById('spacer2').style.background = '#000c36';
    mode = 3
}

possible duplicate of [Changing background based on time of day (using javascript)](http://stackoverflow.com/questions/4358155/changing-background-based-on-time-of-day-using-javascript) — Simply Craig, Nov 17 '14 at 21:23
You're not persisting the mode variable anywhere as far as I can see. Is there something I'm missing that would carry it over into your other pages? — Shriike, Nov 17 '14 at 21:25
Also, is there your actual code? You have elif statements in there, I didn't think Javascript had that keyword. — Shriike, Nov 17 '14 at 21:26

score 0 · Answer 1 · answered Nov 17 '14 at 21:25

How does the next page know what style to use? You need to save the user's choice into some storage (such as a cookie) in addition to making the change on the current page. Then the next page has to read that choice from the storage (cookie) and perform the change actions automatically.

Time-based style changer

1 Answers1