Simple Time Script

[TimFA]

Ok, I know next to nothing about JavaScript but I was trying to write a simple clock (my first JavaScript attempt). I can't get it right, I know its most likely simple, but I'm not sure how to fix it. Heres what I have.

<script language="Javascript">
if (getHours( ) = setHours(1))
{ document.write('It is 1 OClock A.M.;')
}
if (getHours( ) = setHours(2))
{ document.write('It is 2 OClock A.M.;')
}
if (getHours( ) = setHours(3))
{ document.write('It is 3 OClock A.M.;')
}
if (getHours( ) = setHours(4))
{ document.write('It is 4 OClock A.M.;')
}
if (getHours( ) = setHours(5))
{ document.write('It is 5 OClock A.M.;')
}
if (getHours( ) = setHours(6))
{ document.write('It is 6 OClock A.M.;')
}
if (getHours( ) = setHours(7))
{ document.write('It is 7 OClock A.M.;')
}
if (getHours( ) = setHours(8))
{ document.write('It is 8 OClock A.M.;')
}
if (getHours( ) = setHours(9))
{ document.write('It is 9 OClock A.M.;')
}
if (getHours( ) = setHours(10))
{ document.write('It is 10 OClock A.M.;')
}
if (getHours( ) = setHours(11))
{ document.write('It is 11 OClock A.M.;')
}
if (getHours( ) = setHours(12))
{ document.write('It is 12 OClock P.M.;')
}
if (getHours( ) = setHours(13))
{ document.write('It is 1 OClock P.M.;')
}
if (getHours( ) = setHours(14))
{ document.write('It is 2 OClock P.M.;')
}
if (getHours( ) = setHours(15))
{ document.write('It is 3 OClock P.M.;')
}
if (getHours( ) = setHours(16))
{ document.write('It is 4 OClock P.M.;')
}
if (getHours( ) = setHours(17))
{ document.write('It is 5 OClock P.M.;')
}
if (getHours( ) = setHours(18))
{ document.write('It is 6 OClock P.M.;')
}
if (getHours( ) = setHours(19))
{ document.write('It is 7 OClock P.M.;')
}
if (getHours( ) = setHours(20))
{ document.write('It is 8 OClock P.M.;')
}
if (getHours( ) = setHours(21))
{ document.write('It is 9 OClock P.M.;')
}
if (getHours( ) = setHours(22))
{ document.write('It is 10 OClock P.M.;')
}
if (getHours( ) = setHours(23))
{ document.write('It is 11 OClock P.M.;')
}
if (getHours( ) = setHours(24))
{ document.write('It is 12 OClock A.M.;')
}
</script>

Please tell me how to improve it...well lets start with getting it working first. And yes I know it will rewrite the document, I'm just trying to get it to SOMETHING.

[Twey]

<script language="Javascript">

The language attribute is deprecated, use type instead.

if (getHours( ) = setHours(1))

OK, a few issues here: getHours() and setHours() aren't global functions, they're methods of the Date object. That means you need to create one of those first with new Date(). Secondly, the = operator in Javascript is purely for assignment. When you say a = b it means "let a equal b," not "a equals b." Comparison is done with the === operator.

if (getHours( ) = setHours(1))
{ document.write('It is 1 OClock A.M.;')
}
if (getHours( ) = setHours(2))
{ document.write('It is 2 OClock A.M.;')
}
if (getHours( ) = setHours(3))
{ document.write('It is 3 OClock A.M.;')
}
// &c.

OK, so first principles of programming: if you're repeating yourself that much, you're doing it wrong. In this case, you should just insert the number directly into the output.

Keeping it simple because you're new:

<script type="text/javascript">
  var d = new Date(),
    hours = d.getHours(),
    meridian = hours > 12;

  hours &#37;= 12;

  if(meridian) {
    meridian = "P.M.";
  } else {
    meridian = "A.M.";
  }

  document.write("It is " + hours + " " + meridian + ".");
</script>

Now, document.write() isn't really a good idea; it's non-standard nowadays, and (as you noted) destroys the document if you call it at a bad time. So, instead, let's create an element to which our script can output and use that instead:

<p id="clock">&nbsp;</p>

And adapt our script to modify that:

<script type="text/javascript">
  var d = new Date(),
    hours = d.getHours(),
    meridian = hours > 12 ? "P.M." : "A.M.",
    outputElement = document.getElementById("clock");

  hours = (hours % 12) || 12;

  outputElement.firstChild.nodeValue = "It is " + hours + " " + meridian + ".";
</script>

Now, this fails if you have the script before the element in the script, because when the script is run, it hasn't been created yet. So instead of running it immediately, we can make it into a function and tell the browser to run it when it's finished loading the document:

<script type="text/javascript">
  window.onload = function() {
    var d = new Date(),
      hours = d.getHours(),
      meridian = hours > 12 ? "P.M." : "A.M.",
      outputElement = document.getElementById("clock");

    hours = (hours % 12) || 12;

    outputElement.firstChild.nodeValue = "It is " + hours + " " + meridian + ".";
  };
</script>

You probably won't understand most of this yet, but that's OK: get reading and come back if you have questions

[jscheuer1]

All very good, but why not just put the script after the element? I think it is best to avoid using the onload event if it can be avoided, as it is so often a source of conflict with other scripts.

[TimFA]

Thank you, you're right I understand ALMOST noting of it. I'll research and figure it out. Thank you. I wish I knew enough to do that on my own. Oh well, live and learn.

EDIT: Ok, now I want to add minutes, I reread and understand some of it. But I'm yet to figure out how to add minutes. Help?

EDIT: Nevermind instead I have script I derived from that to show you in a minute...Ok. Here it is.

<style>
#clock
{
font-family: Arial;
font-size: 10pt;
}
</style>
<p id="clock">&nbsp;</p>
<script type="text/javascript">
var d = new Date(),
hours = d.getHours(),
meridian = hours > 12 ? "P.M." : "A.M.",
outputElement = document.getElementById("clock");
hours = (hours &#37; 12) || 12;
outputElement.firstChild.nodeValue = "It is currently " + hours + " " + meridian + ", and you are running " + navigator.appName + " " + navigator.appVersion + "."
</script>

I'm not sure how to control the style from inside JavaScript, but know CSS well.

[jscheuer1]

Here, you have a typo:

<style>
#clock
{
font-family: Arial;
font-size: 10pt;
]
</style>

That may be the only problem. Generally, one doesn't control style in javascript. It is set in the stylesheet and then used by whatever is output from the script. There are exceptions, but it is best to not do it. That way you can use the more modern methods of scripting. If you are just starting out, there is no reason to develop a dependency on the older methods.

[Twey]

EDIT: Ok, now I want to add minutes, I reread and understand some of it. But I'm yet to figure out how to add minutes. Help?

d.getMinutes() is the method you want. If you don't understand, edit the simple version instead -- that's why I posted it incrementally like that.

[TimFA]

Thanks everyone. One more thing, is there anyway to go down a line in the output? As in:

It is........
You are running.......

Also I was trying to use d.getMins().

[Trinithis]

It's rather easy to control the style of an element. First, you have to store a reference to it, such as by document.getElementById("idHere"), which you have done. To save a little time, I'll go straight to an example:

outputElement.style.color = "#ff000"; //or "red" or "f00"
outputElement.style.fontFamily = "sans serif";
outputElement.style.position = "absolute";
outputElement.style.zIndex = "1000";
outputElement.style.backgroundImage = "url('myGif.gif')"; //use single quotes (') or escaped double quotes (\")

[jscheuer1]

Thanks everyone. One more thing, is there anyway to go down a line in the output? As in:

It is........
You are running.......

To do that, you need two target elements or you need to create and insert an element like <br>, one possible way:

var theDiv=document.getElementById('clock');
var t1=document.createTextNode('It is........');
var t2=document.createTextNode('You are running.......');
var b=document.createElement('br');
theDiv.appendChild(t1);
theDiv.appendChild(b);
theDiv.appendChild(t2);

Otherwise you need the older, non-standard methods, or you could use the DOM as the above method is known, but use some shortcuts with it. I laid it out the way that I did, to show it in (hopefully) its most elementary form.

Now, back to style - it is fine to control the style as was shown, but you don't have to unless it is changing from what you have in the stylesheet.

[TimFA]

I'm sorry I asked. Haha, I'm not sure about messing with that. Ohhh well. Thanks guys, you helped me a ton.