javascript time code not working

[reekdog]

Hey,

I'm needing to put together a couple of javascript codes. One which will not let a user visit a page on the site after 6pm, and another code which displays a night time image after 6pm, and a day time image from 12am.

I'm not sure what's wrong with my codes as i can't get them working at all :(
I was wondering if someone could please help me get it working!

Code one: display alert message when clicking on link between 6pm-12am

<script type="text/javascript">
var now = new Date();
var hours = now.getHours();
if (hours > 18)
<a href="javascript:alert('You cannot view this page between 6pm and 12am');" title="Alert Message" href="photos.html">Photo's</a>
else
<a href="photos.html">Photo's</a>
</script>



Code two: display night time image between 6pm-12am

<script type="text/javascript">
var now = new Date();
var hours = now.getHours();
if (hours < 18)
<img src="dayimage.jpg">
else
<img src="nightimage.jpg">
</script>


Any help is appreciated!! Thanks :)

[rangana]

Hope this helps:

<script type="text/javascript">
window.onload=function(){
var now = new Date();
var hours = now.getHours(),
message=document.getElementById('message'),
image=document.getElementById('image');
if (hours > 18)
{
var a=document.createElement('a'), // create an <a> tag
img=document.createElement('img'); // create an <img> tag
a.setAttribute('href','photos.html'); // Assign value on href attribute
a.onclick=
function()
{
alert('You cannnot view this page between 6pm and 12am');
return false;
};
a.setAttribute('title','Alert Message'); // Set a title attribute
a.innerHTML='Photo\'s';
img.setAttribute('src','dayimage.jpg'); // Set src attribute whose value is assigned to the right
message.appendChild(a); // Append to element whose ID is message.
image.appendChild(img); // Append to element whose ID is image
}
else
{
var a=document.createElement('a'), // create an <a> tag
img=document.createElement('img'); // create an <img> tag
a.setAttribute('href','photos.html'); // Assign value on href attribute
a.innerHTML='Photo\'s';
img.setAttribute('src','dayimage.jpg'); // Set src attribute whose value is assigned to the right
message.appendChild(a); // Append to element whose ID is message.
image.appendChild(img); // Append to element whose ID is image
}
}
</script>
<div id="message">&nbsp;</div>
<div id="image">&nbsp;</div>

[reekdog]

wow, thanks for helping with the code. Is it possible to make the code smaller? Just because there are a few lines of code you have written I'm a bit unsure about at this stage as we haven't yet covered it in our class.

If not then that's fine, i will look into them, but was just wondering if there was another way of putting the code together, maybe a bit more similar to what i started with in my initial post, or was i completely off with that?

Thanks :)

[rangana]

The script above I've given you was a DOM method. You can try to use this script instead:

<script type="text/javascript">
window.onload=function(){
var now = new Date();
var hours = now.getHours();
if (hours > 18)
document.write('<a href="photos.html" onclick="alert(\'You cannot view this page between 6pm and 12am\');return false;" title="Alert Message">Photo\'s</a><img src="dayimage.jpg">');
else
document.write('<a href="photos.html">Photo\'s</a><img src="dayimage.jpg">');
}
</script>


It uses the deprecated document.write(), but hope it helps.

[reekdog]

Thanks that's great, makes a lot more sense then the other code :)

I just have one more question, how do i make that code part of a link?
I would like to have "Photos" as a link in my nav bar, but when i insert the code no text appears saying "Photos" even though it should.



<div class="navbar">

<a href="index.html">Home</a>
<a href="about.html">A Bit About Me</a>
<a href="age.html">Age</a>

<script type="text/javascript">

window.onload=function(){
var now = new Date();
var hours = now.getHours();
if (hours > 18)

document.write('<a href="photos.html" onclick="alert(\'You cannot view this page between 6pm and 12am\');return false;" title="Alert Message">Photo's</a>

</script>



Would you be able to help me out with how to place that Photo's javascript code for the Photo's link which is part of my navbar?

Thanks again, really appreciate your help!

[rangana]

You missed:

To close your anonymous function.
To escape the quotes
To close the document.write()
To end the quotes inside document.write('');


window.onload=function(){
var now = new Date();
var hours = now.getHours();
if (hours > 18)

document.write('<a href="photos.html" onclick="alert(\'You cannot view this page between 6pm and 12am\');return false;" title="Alert Message">Photo\'s</a>');
}


Add highlighted and see if it helps.

[reekdog]

Great thanks! I also added a comment out code to get the link appearing within my navbar along with the other links.

I was wondering how i check to see if the time code is working correctly or not? At the moment I'm changing the clock on my computer but I'm not getting the time changes. So I'm wondering if my code is correct or maybe the site just isn't reading the computers time properly.

I have this code:

<!--
window.onload=function(){
var now = new Date();
var hours = now.getHours();
if (hours > 18)

document.write-->
('<a style="color: black" href="photos.html" onclick="alert(\'You cannot view this page between 6pm and 12am\');return false;" title="Alert

Message">Photo's</a>');

}

and

<!--
window.onload=function(){
var now = new Date();
var hours = now.getHours();
if (hours > 18)

document.write-->
('<img src="images/night.jpg");
return false;"
img src="images/day.jpg"'>


Any suggestions would be a great help! Thanks again for your help :)

[rangana]

I'm confused. Why are there two onload events :confused:

[reekdog]

Sorry, just cause i was creating the time (18hr) code for both a link, where the link cannot be viewed before 6pm, and an image, where a different image displays before 6pm and after 6pm.

I couldn't quite get the code above to work, but have a different code which works now.

For the link i have:

<script type="text/javascript">
function timeLock()
{
var getTime = new Date();
var getHours = getTime.getHours();
if (getHours >= 18)
{
alert("This page is not available until tomorrow due to scheduled server maintenance.");
return false;
}
else

return true;

}
</script>

with

<a style="color: black"href="age.html" onClick="return timeLock();">Age</a>


And for the image i have:


<script type="text/javascript">
var now=new Date();

if(now.getHours() >= 18)
document.write('<img src="images/night.jpg">');
else
document.write('<img src="images/day.jpg">');
</script>


Thanks for your help :)