Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript clock and XHTML strict problem

    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?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,828
    Thanks
    0
    Thanked 258 Times in 253 Posts
    Hi there manicman,

    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

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,828
    Thanks
    0
    Thanked 258 Times in 253 Posts
    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

  • #5
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New Coder
    Join Date
    Aug 2006
    Posts
    30
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    the validator
    http://validator.w3.org/
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •