Javascript clock and XHTML strict problem

manicman · 08-08-2006, 08:28 AM

I have put a clock on my XHTML strict webpage. It is inside a form which is called 'clockform'

The problem is that the javascript clock will only work when I use the code:

Code:

<form name="clockform>

But that is not XHTML strict valid, when I use the XHTML Strict valid code:

Code:

<form id="clockform>

the clock won't work because it does not 'see' a 'name' element in the code.

HOw do I get the javascript to look for the 'id' element?

coothead · 08-08-2006, 09:43 AM

Hi there manicman,

Quote:

How do I get the javascript to look for the 'id' element?

Without seeing the code that is causing you problems, it is difficult to help you.

I suggest that you supply a link to your site or the code.

coothead

manicman · 08-08-2006, 10:03 AM

Ok, here is the code I have put where I want the clock to appear:
This code works, the only problem is that it is not XHTML strict valid:

Code:

<table>
<tr>
    <td>
    <form name="clockform">
       Current Time:<br />
       <input type="text" style="text-align:center" name="clockspot" size="10">
    </form>
    </td>
</tr>
</table>

This code is XHTML strict valid but does not display the clock:

Code:

<table>
<tr>
    <td>
    <form action="clocktest.htm" id="clockform">
        Current Time:<br />
        <input type="text" style="text-align:center" id="clockspot" size="10">
    </form>
    </td>
</tr>
</table>

And here is the javascript code for the clock:

Code:

<SCRIPT language="JavaScript">
<!--
function startclock()
{
var thetime=new Date();

var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();

if (nsecn<10)
 nsecn="0"+nsecn;

if (nmins<10)
 nmins="0"+nmins;

document.clockform.clockspot.value=nhours+":"+nmins+":"+nsecn;

setTimeout('startclock()',1000);

} 

//-->
</SCRIPT>

Hope this can help you help me!!

If you want to see it in action I can put it on my website.

coothead · 08-08-2006, 10:53 AM

Hi there manicman,

this has been validated xhtml strict...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
#clockspot {
    text-align:center;
 }
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[
function startclock() {

var thetime=new Date();
var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();

if (nsecn<10)
 nsecn="0"+nsecn;

if (nmins<10)
 nmins="0"+nmins;

document.getElementById('clockspot').value=nhours+":"+nmins+":"+nsecn;

setTimeout('startclock()',1000);

} 
window.onload=startclock;

//]]>
</script>

</head>
<body>

<table>
<tr>
    <td>
    <form action="#" >
      <div>
        Current Time:<br />
        <input type="text" id="clockspot" size="10"/>
      </div>
    </form>
    </td>
</tr>
</table>

</body>
</html>

coothead

Kor · 08-08-2006, 11:01 AM

Well, hm, it not so simple to make a XHTML strict valid page (your code weas not valid at all for a thousands of reasons: elements must be nested in level elements (a, p, span, div)..., input must have and end code />, script must have a type, not a language, and it must be lower case, as all the tags and attributes), and it must be escape with a CDATA (to avoid let the interpretor take some javascript operator or characters - such as < > &... as XML mark-ups)... and so on.

On the other hand you should use getElementById() if your element has an id.

How here's a page which is strict XHTML valid:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
/* <![CDATA[ */
function startclock()
{
var thetime=new Date();
var nhours=thetime.getHours();
var nmins=thetime.getMinutes();
var nsecn=thetime.getSeconds();
if (nsecn<10)
 nsecn="0"+nsecn;

if (nmins<10){
 nmins="0"+nmins;
	}
document.getElementById('clockspot').value=nhours+":"+nmins+":"+nsecn;
setTimeout('startclock()',1000);
} 
onload=startclock
/* ]]> */
</script>
</head>
<body>
<table>
<tr>
<td>
<form action="clocktest.htm" id="clockform" style="display:inline">
<div>Current Time:</div>
<div><input type="text" style="text-align:center" id="clockspot" size="10" /></div>
</form>
</td>
</tr>
</table>
</body>
</html>

manicman · 08-08-2006, 11:19 AM

Thanks for the help, got it working now.

Yeah I know the code I gave was not fully XHTML valid, but my site is. The code I gave was from a blank page that I was using to try and get the clock to work on.

Thanks again.

Kor · 08-08-2006, 11:41 AM

the validator
http://validator.w3.org/