Javascript loading issue, where's the problem?

[Wellwisher]

Sounds familiar. 

I said you were partly right. Still, it feels like this script has a mind of its own. I feel spooked by it now.

[Biology Forums]

It works now, great!

Thanks all for helping

[leghorn23]

In this unorthodox method, we can be sure the html element is loaded first, and the next item to load is the script itself. This rules out any conflicts and things should work:

Just put the JavaScript below the container and remove the onLoad function.

This

Code Select Expand

//init clock
window.onload = function()
{
clock();
setInterval(\'clock()\', 1000);
}
To

Code Select Expand

//init clock
clock();
setInterval(\'clock()\', 1000);

Sounds familiar. 

This could potentially introduce a race condition. Running code within a timeout should be a last resort IMO

[Biology Forums]

How would you change it

[leghorn23]

You simply need to place the Javascript after the block that its adding the content to. This is because Javascript is referencing that div, so if it doesn't exist yet it will throw an error

Try this:

Code Select Expand


<span id="clock"></span>
<script type="text/javascript">
/*<![CDATA[*/
function clock()
{
// Generate time
var time = new Date();
var hours = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();

// Add preceding 0s, if required
var hours = (hours < 10 ? \'0\' : \'\')+hours;
var minutes = (minutes < 10 ? \'0\' : \'\')+minutes;
var seconds = (seconds < 10 ? \'0\' : \'\')+seconds;

// Generate formated time
var time = hours+\':\'+minutes+\':\'+seconds;

// Get where abouts in the day it is
if(hours >= 6 && hours < 12)
{
var greeting = \'Good morning\';
}
else if(hours >= 12 && hours < 18)
{
var greeting = \'Good afternoon\';
}
else if(hours >= 18 && hours < 21)
{
var greeting = \'Good evening\';
}
else
{
var greeting = \'Hello\';
}

// Display Greeting
document.getElementById(\'clock\').innerHTML = greeting;

//document.getElementById(\'clock\').innerHTML = time+\'<br />\'+greeting;
}

clock();
/*]]>*/
</script>


[nend]

You simply need to place the Javascript after the block that its adding the content to. This is because Javascript is referencing that div, so if it doesn't exist yet it will throw an error

Just put the JavaScript below the container and remove the onLoad function.