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 13 of 13
  1. #1
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts

    timeout/interval

    JavaScript ain't my forté Help please!

    I keep getting (in IE) error "Error: N is not defined on Line: 23"
    It clearly is! Wondering if timeout's and/or interval's remove vars or something. If I call the function normally it works fine.

    The script is to make a live clock with the vars at the top being kinda like master vars where everything else falls around it. Well commented, hopefully not too hard to follow. init() just draws the clocks face and hands, updateDot() moves the specified dot to its proper place, (according to time,) and updateClock() just loops through the dots updating them with updateDot()!

    Three links - one called normally, one called with interval and one with timeout...
    Standard
    setInterval
    setTimeout

    Only use IE!

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I dunno if I'm doing something wrong, but I just did a view source and the first thing I see is a series of H1's. I don't see any Javascript code whatsoever. So I'm not sure how you're generating this, but it's not using client side Javascript.

    I also don't get the same error as you, I get an 'Object expected' error.

    Sadiq.

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I do not see any javascript on those pages either.
    But worse yet is that there is absolutely no formatting and the entire codes are on one line!

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Weird, I just opened it in FireFox and now I can view the source. It doesn't work of course, but at least the source is available.

    I'll take a look and see if I can figure anything out.

    setInterval
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    /* common vars */
    var N=12;        // the number of... numbers!
    var dN=9;        // number of dots per hand
    var rX=150;      // clock width (radius)
    var rY=150;      // clock height (radius)
    var cX=250;      // center X
    var cY=200;      // center Y
    var PI=Math.PI;  // self-explanatory
    var W=PI*2;      // 360 degree turn in radians
    var Q=PI/2;      // 90 degree turn in radians
    function init()
    {
      /* output the center dot */
      document.write('<h1 style="position:absolute;left:'+cX+';top:'+cY+'">.</h1>');
      /* loop to output the numbers in the appropriate places */
      for(i=1;i<=N;i++)
      {
        var X=rX*Math.sin(W/N*i)+cX;
    	var Y=rY*Math.cos((W/N*i)+(Q*2))+cY;
        document.write('<h1 style="position:absolute;left:'+X+';top:'+Y+';">'+i+'</h1>');
      }
      /* loops to create hands */
      for(i=1;i<=dN;i++)  // second hand
      {
        var dY=cY-((rY/dN)*i)/1.1;  // higher division makes hand shorter
        document.write('<h1 id="second'+i+'" r="'+(cY-dY)+'" style="color:#C00;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
      }
      for(i=1;i<=dN;i++)  // minute hand
      {
        dY=cY-((rY/dN)*i)/1.2;      // higher division makes hand shorter
        document.write('<h1 id="minute'+i+'" r="'+(cY-dY)+'" style="color:#369;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
      }
      for(i=1;i<=dN;i++)  // hour hand
      {
        dY=cY-((rY/dN)*i)/2.2;      // higher division makes hand shorter
        document.write('<h1 id="hour'+i+'" r="'+(cY-dY)+'" style="color:#393;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
      }
      setInterval("updateClock()", 1000);
    }
    function updateDot(id)
    {
      /* get the current date and time */
      var now=new Date();
      var seconds=now.getSeconds();
      var minutes=now.getMinutes();
      var hours=(now.getHours()>12)?now.getHours()-12:now.getHours();  // correct 24 hour clock
      switch(id.substring(0, id.length-1))
      {
        case 'second':
    	  var turn=seconds/15;
    	  break;
        case 'minute':
    	  var turn=minutes/15;
    	  break;
        case 'hour':
    	  var turn=hours/3;
    	  break;
      }
      /* position the dot accordingly */
      var dot=document.getElementById(id);
      var r=dot.getAttribute('r');
      var X=r*Math.sin(Q*turn)+cX;
      var Y=r*Math.cos((Q*turn)+(Q*2))+cY;
      dot.style.left=X;
      dot.style.top=Y;
    }
    function updateClock()
    {
      for(i=1;i<=dN;i++)
      {
        updateDot('second'+i);
    	updateDot('minute'+i);
    	updateDot('hour'+i);
      }
    }
    window.onload=init;
    -->
    </script>
    </head>
    
    <body>
    
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I've found some answer to the problem.

    It seems that if you call init() in the onLoad handler, because you're using document.write(), it overwrites all the source code (including your Javscript functions).

    Therefore, it overwrites your variables too. That's why when we view source in IE, we can't see the Javascript. Hence there's no updateClock() function to call when the interval expires.

    Simply moving the call to init() from the onLoad handler into the body seems to fix that. While I was messing with the code to figure out what was going wrong, I ended up with this:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <script type="text/javascript">
    <!--
    /* common vars */
    var N=12;        // the number of... numbers!
    var dN=9;        // number of dots per hand
    var rX=150;      // clock width (radius)
    var rY=150;      // clock height (radius)
    var cX=250;      // center X
    var cY=200;      // center Y
    var PI=Math.PI;  // self-explanatory
    var W=PI*2;      // 360 degree turn in radians
    var Q=PI/2;      // 90 degree turn in radians
    function init()
    {
      //document.write('<button onclick="updateClock()">update</button>');
      /* output the center dot */
      document.write('<h1 style="position:absolute;left:'+cX+';top:'+cY+'">.</h1>');
      /* loop to output the numbers in the appropriate places */
      for(i=1;i<=N;i++)
      {
        var X=rX*Math.sin(W/N*i)+cX;
    	var Y=rY*Math.cos((W/N*i)+(Q*2))+cY;
        document.write('<h1 style="position:absolute;left:'+X+';top:'+Y+';">'+i+'</h1>');
      }
      /* loops to create hands */
      for(i=1;i<=dN;i++)  // second hand
      {
        var dY=cY-((rY/dN)*i)/1.1;  // higher division makes hand shorter
        document.write('<h1 id="second'+i+'" r="'+(cY-dY)+'" style="color:#C00;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
      }
      for(i=1;i<=dN;i++)  // minute hand
      {
        dY=cY-((rY/dN)*i)/1.2;      // higher division makes hand shorter
        document.write('<h1 id="minute'+i+'" r="'+(cY-dY)+'" style="color:#369;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
      }
      for(i=1;i<=dN;i++)  // hour hand
      {
        dY=cY-((rY/dN)*i)/2.2;      // higher division makes hand shorter
        document.write('<h1 id="hour'+i+'" r="'+(cY-dY)+'" style="color:#393;position:absolute;left:'+cX+'px;top:'+dY+'px;">.</h1>');
      }
      updateClock();
    }
    function updateDot(id)
    {
      /* get the current date and time */
      var now=new Date();
      var seconds=now.getSeconds();
      var minutes=now.getMinutes();
      var hours=(now.getHours()>12)?now.getHours()-12:now.getHours();  // correct 24 hour clock
      switch(id.substring(0, id.length-1))
      {
        case 'second':
    	  var turn=seconds/15;
    	  break;
        case 'minute':
    	  var turn=minutes/15;
    	  break;
        case 'hour':
    	  var turn=hours/3;
    	  break;
      }
      /* position the dot accordingly */
      var dot=document.getElementById(id);
      var r=dot.getAttribute('r');
      var X=r*Math.sin(Q*turn)+cX;
      var Y=r*Math.cos((Q*turn)+(Q*2))+cY;
      dot.style.left=X;
      dot.style.top=Y;
    }
    function updateClock()
    {
     //alert('updating');
      for(i=1;i<=dN;i++)
      {
        updateDot('second'+i);
    	updateDot('minute'+i);
    	updateDot('hour'+i);
      }
    }
    //window.onload=init;
    -->
    </script>
    </head>
    
    <body>
    
    <script>
     init();
     setInterval("updateClock()", 1000);
    </script>
    
    </body>
    </html>
    The hands of the clock seem to work fine, but the numbers are gone.. not sure what happened there..

    Hope that helps, Good luck!
    Sadiq.

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sad69
    Weird, I just opened it in FireFox and now I can view the source. It doesn't work of course, but at least the source is available.
    Oh, I see said the blind man....

    Yea, IE is rendering the script but I/we were only see the results of the document.write statements overwriting the page and thus, the errors are being thrown because the script is no longer on the page...

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Quote Originally Posted by trib4lmaniac
    Only use IE!
    Your sig tells us not to.

  • #8
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmm okay, I've got the hand's working now. (Thank you sadiq.) The numbers haven't disappeared, but now they're all bunched up into the top-left corner! Anyone shed some light on this?

    clock-nf.htm

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Might want to see how it was done here.

  • #10
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's nice, but I would still like to see what's wrong with mine. I can't work it out, if I alert the X and Y coordinates for the numbers, they appear to come out fine, but they're not being displayed in the right place!

    clock-alt.htm

  • #11
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, according to moz's DOM Inspector the h1's for the numbers don't have top or left style attributes. Don't know why, there clearly there!

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The reason it didn't work is not the h1 but that the left and top properties don't have units.
    Code:
     /* output the center dot */
     document.write('<h1 style="position:absolute;left:'+cX+'px;top:'+cY+'px">.</h1>');
    /* loop to output the numbers in the appropriate places */
      for(i=1;i<=N;i++)
      {
         ...
         document.write('<h1 style="position:absolute;left:'+X+'px;top:'+Y+'px;">'+i+'</h1>');
    You've got the px in the clock hands parts, you must have overlooked it in the dot and numbers part.

  • #13
    Regular Coder trib4lmaniac's Avatar
    Join Date
    Feb 2004
    Location
    Cornwall, UK
    Posts
    535
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah great, thanks glenn


  •  

    Posting Permissions

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