Dynamic Background Image Depending on Time of Day

@the_studentOct 21.2013

Hi Guys,

Newbie here to Javascript, this is a hobby that is fast getting out of control and I’m in over my head. So could do with a little help, so many thing’s I want to try and do, yet can’t seem to get this little function working lol

Basically I have a function that in my mind checks the time and if it is between 5am and 6pm will display a daytime background or a night time background if outside of those hours. There is a second set of amendments in the loop just to validate via text what should be outputted, but neither is…. scratching my head now, as I don’t understand why it just doesn’t work.

No errors according to my IDE, it just doesnt load a background, does that mean I’m stuck in limbo?

Here’s my code:

[CODE]<script> // Dynamic Background for HTML5 template based on time of day. function dynamicBG(){

var d = new Date(); var h = d.getHours();

if ((h <= 5) && (h >=18)) { document.body.style.backgroundImage=”url(‘images/assets/daytime-bg.jpg’)”; document.getElementById(“bgText”).innerHTML=”The BG Should be Day Time”; } else{ document.body.style.backgroundImage=”url(‘images/assets/nightTime-bg.jpg’)”; document.getElementById(“bgText”).innerHTML=”The BG Should be Night Time”; } }

window.onload = dynamicBG(); </script>[/CODE]

Thanks in advance for any help you can give.

to post a comment

JavaScript

10 Comments(s) _↴

@tech_soul8Oct 22.2013 — #It's because your if condition will always evaluate to false.

You should construct your if condition like this:

<i>
 </i>if ((h&gt;=0 &amp;&amp; h&lt;=5) || (h&gt;=18 &amp;&amp; h&lt;= 23))
 {
 //code for night-time image
 }
 else
 {
 //code for daytime image
 }

@the_studentauthorOct 22.2013 — #Hi tech_soul8,

I tried that and it didn't work. if I remove the DOM changes and replace them with an alert the condition appears to execute.

Do I need to pass in the DOM element I am trying to change and then return an updated one, or will the function do that anyway?

@tech_soul8Oct 22.2013 — #Hi tech_soul8,

I tried that and it didn't work. if I remove the DOM changes and replace them with an alert the condition appears to execute.

Do I need to pass in the DOM element I am trying to change and then return an updated one, or will the function do that anyway?[/QUOTE]

First let's start with the logic of your [I]if[/I] statement:

<i>
 </i>if ((h &lt;= 5) &amp;&amp; (h &gt;=18))

this will always evaluate to false because how can some number be less then or equal to 5 and in the same time be bigger then or equal to 18? It can't! You used wrong [I]logical[/I] operator!

Recall that when using logical [I]AND[/I] (&&) operator both conditions must be [B]true[/B] for overall result to evaluate to true and in your case as I already mention above it's not possible. So the first mistake lies here.

The second mistake is section in your code where you are connecting your [I]event handler[/I] with the function

<i>
 </i>window.onload = dynamicBG()

remember that when you are handling events via object's property you never pass set of parentheses to your calling function. So your connection to function should look like this

<i>
 </i>window.onload = dynamicBG

and your final code should look something like this

<i>
 </i>// Dynamic Background for HTML5 template based on time of day.
 function dynamicBG(){
 
 <i>	</i>var d  = new Date();
 <i>	</i>var h = d.getHours();
 
 if ((h&gt;=0 &amp;&amp; h&lt;=5) || (h&gt;=18 &amp;&amp; h&lt;= 23))
 {
 document.body.style.backgroundImage="url('images/assets/daytime-bg.jpg')";
 document.getElementById("bgText").innerHTML="The BG Should be Day Time";
 }
 else
 {
 document.body.style.backgroundImage="url('images/assets/nightTime-bg.jpg')";
 document.getElementById("bgText").innerHTML="The BG Should be Night Time";
 }
 }
 window.onload = dynamicBG;

@the_studentauthorOct 22.2013 — #I feel so stupid now, I can't believe I overlooked these points.... I need to read some more!

Just to add this also didn't work as expected, the wrong image was shown for daytime, so I swapped the two lines out and it works now.

Thank you so much for your help.

@tech_soul8Oct 22.2013 — #
Just to add this also didn't work as expected, the wrong image was shown for daytime, so I swapped the two lines out and it works now.

Thank you so much for your help.[/QUOTE]

Yes, I figured that out but didn't wont to change your code further more... ?

You're welcome!

@the_studentauthorOct 22.2013 — #You've been a big help, I really appreciate it... I'm going to revisit my first book again, as the fundamentals seem to be lost on me!

That's my problem, poor short term memory.

Are there any other publications you recommend for a programming novice such as me?

@rootOct 22.2013 — #this should work as well...

[CODE]window.onload = function(){
 var h = new Date().getHours();
 var day = !((h>=0 && h<=5) || (h>=18 && h<= 23));
 imageStr= day ? "daytime-bg.jpg":"nightTime-bg.jpg";
 messageStr = day ? "The BG Should be Day Time":"The BG Should be Night Time";
 document.body.style.backgroundImage="url('images/assets/"+imageStr+"')";
 document.getElementById("bgText").innerHTML=messageStr;
 }[/CODE]

@the_studentauthorOct 22.2013 — #Wow that's some way advanced coding there.... thanks, but you have completely rewritten my idea of the function ?

Doesn't your function add extra complexity to a learning coders needs?

@tech_soul8Oct 22.2013 — #You've been a big help, I really appreciate it... I'm going to revisit my first book again, as the fundamentals seem to be lost on me!

That's my problem, poor short term memory.

Are there any other publications you recommend for a programming novice such as me?[/QUOTE]

Mistakes are just that, mistakes and they happens to beginners just like they do happen to more experienced programmers as well. You should not feel discouraged because of that!

Take a look at the [I]"Beginning JavaScript 4th Edition" by Paul Wilton and Jeremy McPeak[/I]. This is the book I have started with and it have taught me a lot of fundamentals.

@the_studentauthorOct 22.2013 — #Got it, will make a start on it tomorrow.

Thanks for the tip.

Also in #JavaScript _↴

A clock not going on normal time.Architecture question: DHTML or not?Open Window diferent behavious in IE and Netscape 7.2

Success!

Help @the_student spread the word by sharing this article on Twitter...

Tweet This

Dynamic Background Image Depending on Time of Day

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Dynamic Background Image Depending on Time of Day

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴