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,746
    Thanks
    0
    Thanked 244 Times in 239 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,746
    Thanks
    0
    Thanked 244 Times in 239 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
    Kor
    Kor is offline
    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
    Kor
    Kor is offline
    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
    •