Javascript If...if else statement with HTML code

[mattsmith24]

Hi there,

I've got 3 images that I want to show at different times of the day.

I've used a standard Javascript If else statement e.g.:

<script type="text/javascript">
var d = new Date()
var time = d.getHours()

if (time<12)
{
document.write("Morning")
}
else if (time>12 && time<17)
{
document.write("Afternoon")
}
else
{
document.write("Evening")
}
</script>


... and this code works. I've put this where the image(s) need to be displayed. What I want to do is replace the "document.write" bit with a standard <IMG> (or equivalent) where it'll just put the image in, just so a different image will be displayed

I've tried all sorts of different variations with no luck. I'm new to Javascript, so you'll probably think i'm dumb. Any ideas?

[thetestingsite]

question: did you try using document.write("<img src='whatever.jpg'>"); ?

If not that is why it is not working for you. The document.write function in Javascript just does what it says (writes in the document.). Go ahead and try this and see if it fixes your problem.

[mattsmith24]

question: did you try using document.write("<img src='whatever.jpg'>"); ?

If not that is why it is not working for you. The document.write function in Javascript just does what it says (writes in the document.). Go ahead and try this and see if it fixes your problem.

Hello, thanks for replying.

Yes, I did try that, and that's what I thought it would do - which is why I chose that bit of code, but it doesn't seem to display any of the images.

I could understand if there was an error in the code, which means none of the If statements were ever true, but surely then the else statement should be shown. The javascript is correct isn't it - there's nothing wrong in there?

[thetestingsite]

Theres nothing wrong with the javascript from what i can see in the first post above. Can you post a link to the website that the javascript is on and I'll take a look at it. If you don't want to post it you could also send it via PM or YIM to me.

[djr33]

I may be off here, but I think I've heard that document.write doesn't work after the page is loaded... and before that replaces everything with it's contents.
You should use another command for the image.

something like, perhaps...
<img src="image.jpg" name="testimage">

javascript:
testimage.src = "afternoon.jpg";

But.... I don't know if that works.

Someone shall know soon...

Since I don't know javascript, I can't be much help. Heh.

[mattsmith24]

Many thanks both for your help.

You actually answered it in your first reply thetestingsite, but it was something I hadn't noticed.

The standard speech marks (") around an image source do not work within the document.write speech marks. Instead - as you suggested, inverted commas (') have solved the problem.

Many thanks!

[thetestingsite]

not a problem at all, let us know if you need anymore help

[mwinter]

if (time<12)
/* ... */
else if (time>12 && time<17)

What about at noon?

Mike

[djr33]

Then, according to the code, it's "Evening"


The solution is just to remove the first part of the if:
else if (time<17)

That works since you've already eliminated each time before noon.

[Twey]

However, note that this doesn't allow for non-JS browsers. The preferable option is:

<img src="default.png" alt="Time Image" id="image_id">
<script type="text/javascript">
var imgs = {
  0 : "morning.png",
  12 : "afternoon.png",
  17 : "evening.png"
},
  time = (new Date()).getHours();

var li = 0;
for(var i in imgs)
  if(i > time)
    break;
  else
    li = i;

window.onload = function() {
  document.images['image_id'].src = imgs[li];
};
</script>