Script error but not sure why

JavaScript
1

So i created this script following this logic: I think its an operator issue but not sure.
Hoping someone could point out the error of a newbies ways. thx.

<script>
function imagetime() {
// man means morning, afternoon or night
var current= new Date()
var man=current.getHours()
if (man<=8) {
    document.getElementById("imagedest").innerHTML = "<img src='1.jpg'>"; //display the morning image
}
	
else 
	if (man>8&&<16) {
    document.getElementById("imagedest").innerHTML = "<img src='2.jpg'>"; //display the afternoon image
}
else {
	document.getElementById("imagedest").innerHTML = "<img src='3.jpg'>"; //display the evening image
}
}
</script>

The logic:

if (x > 5) {
 /* do the right thing */
} else if (x > 50) {
 /* do the right thing */
} else {
 /* do the right thing */
}
2

Fixed it never mind.

3

@kenny86daniel, that post that you ‘fixed it’ isn’t very helpful to others reading the thread. Perhaps you can let us know what you did to fix it.

1 Like
4

Agreed: here’s what i did. Rather than use the innerHTML I chose to write directly to the page using document.write.
That was the first thing. Then i rejigged the hours into 3 parts and got rid of using the “or” operator and just checked if hours is less than 18 in my second statement and if not then display the last image “night”

Less code using document.write as opposed to inner.html.

<body onload="imagetime()">
<br />


<br />

<div>
<script>
function imagetime() {
// man means morning, afternoon or night - hours is divided in 3 parts to equal 24 hours
var current= new Date()
var man=current.getHours()
if (man<=11) {
    document.write('<center><img src="1.jpg"><br /><p style="color: blue; font-size: 46px;">Good Morning</p></center>'); //display the morning image if hours is less than 8
}
	
else if (man<18) {
    document.write('<center><img src="2.jpg"><br /><p style="color: blue; font-size: 46px;">Good Afternoon</p></center>'); //display the afternoon image if hours is  less than 16
}
else {
	document.write('<center><img src="3.jpg"><br /><p style="color: blue; font-size: 46px;">Good Evening</></center>');//display the evening image if hours is greater than 16
}
}
</script>
</div>

<br/>
<br />

</body>
</html>
5

Hi,

I would recommend against using document.write, inline event handlers and inline styles.

Here’s a modified version that is easier to understand / expand upon:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Greeter</title>
    <style>
      #greeting {
        text-align: center;
      }

      #greeting p {
        color: blue;
        font-size: 46px;
      }
    </style>
  </head>

<body>
    <div id="greeting"></div>

    <script>
      function displayGreeting() {
        var today = new Date();
        var hour = today.getHours();
        var greetingContainer = document.getElementById('greeting');

        if (hour < 12) {
          greetingContainer.innerHTML = '<img src="1.jpg"><p>Good Morning</p>';
        } else if (hour > 12 && hour < 18) {
          greetingContainer.innerHTML = '<img src="2.jpg"><p>Good Afternoon</p>';
        } else {
          greetingContainer.innerHTML = '<img src="3.jpg"><p>Good Evening</p>';
        }
      }

      displayGreeting();
    </script>
  </body>
</html>

Any questions, just let me know :slight_smile:

6

Oh man that is some smooth code Pullo!!! This newbie Really appreciates the feedback.
It is much easier to see the flow.

thanks

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.