Home/ Questions/Q 7625507
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T05:12:04+00:00

I’m just starting to learn javascript, so this is likely a pretty simple question.

  • 0

I’m just starting to learn javascript, so this is likely a pretty simple question. I’ve tried searching for an answer, but I think I just don’t know enough to be like, ‘oh, this looks different but answers my question too.’

What I want to be able to do is to change the background color of a page based on the time of day, and also change an image based on the time of day. I have it working with an if…else if… statement for the background color placed in the head of the page, and a separate if…else if… statement affecting the image in the body.

The head script that changes the bg color looks like:

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

if (time>=0 && time<=5)  
{  
document.write ('&lt;body style="background-color: 296688">')  
}  
else if

…and then the other times follow, each with a different color.

The body script that changes the image looks like:

<img src="" name="sunMoon" id="sunMoon" />  
    <script type="text/javascript">  
    var d=new Date();  
    var time=d.getHours();  
    var elem = document.getElementById('sunMoon')  
if (time>=0 && time<=5)  
        {  
        elem.src = 'Images/sunMoon1.png'  
        }  
    else if

…and then the other times follow, each with a different src.

Is it possible to change the image AND the bg color using the same if…else if… statement in the head? I tried something like this in the head:

var d=new Date();
var time=d.getHours();
var elem=document.getElementById('sunMoon')

    if (time>=0 && time<=5)
    {
    document.write ('<body style="background-color: 2966B8">');
            elem.src="images/sunMoon1.png"
    }
else if...

but it didn’t work.

I think with the third (nonworking) example, either it’s not possible to have a single if… do two things (change the bg color AND the image), or I’m just messing up the image code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem with your third (non-working) bit of code is that you are trying to change the source attribute of an element that doesn’t exist when the script is run. Generally speaking the browser parses the page’s HTML from top to bottom, when it comes across a block it runs the code then continues on through the HTML. So in the example you have working the JavaScript code that alters the image source comes after the element in the HTML which is why it works. In the broken code you call elem=document.getElementById('sunMoon') in the head section, so no element with ID ‘sunMoon’ exists yet.

    Generally it is best practice to place your scripts at the bottom of the page (just before the closing tag) so that they run after everything else has loaded, and don’t block the rendering of the page. If you were to do that you’d need to change the code that alters the background colour as you can’t write it directly to the body tag. The best practice solution would be to apply a different CSS class to the body depending on the time of day and then set up style rules for each class in your CSS.

    So for example:

    <script type="text/javascript">

  var body = document.getElementsByTagName('body')[0];
  var elem = document.getElementById('sunMoon');

  if (time>=0 && time<5)  
  {  
    body.className = 'morning';
    elem.src = 'Images/sunMoon1.png';
  }  
  else if (time>=5 && time<10)  
  {  
    body.className = 'afternoon';
    elem.src = 'Images/sunMoon2.png';
  }

</script>

    Then in your CSS you need rules for .morning, .afternoon etc

    • 0