11 Replies - 891 Views - Last Post: 16 June 2012 - 02:55 PM

#1 trickstar34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 05-June 09

Updating clock not working

Posted 12 June 2012 - 07:32 PM

So I have a Javascript function that uses the servers time to set the initiated time (with ASP.Net) and thats working fine, but actually displaying the clock isn't working and I've been staring at it for hours trying to figure out whats wrong and I just can't find it. The error is completely with the Javascript because when I check the source code of the document when I run it through a server it puts numbers into my values. Can somebody help show me whats wrong?

This is my script (the <% and %> are ASP.Net code):
<script type="text/javascript">
            <!--
            var clockElement = document.getElementById("Clock");
            var clockZone = "CMT";
            var clockHours = <% Response.Write(DateTime.Now.Hour.ToString()); %>;
            var clockMinutes = <% Response.Write(DateTime.Now.Minute.ToString()); %>;
            var clockSeconds = <% Response.Write(DateTime.Now.Second.ToString()); %>;
            function displayClock() {
                var AMorPM;
                var hours;
                var minutes;
                var clockString;
                if (clockSeconds > 59) {
                    clockMinutes++;
                    clockSeconds = 0;
                    }
                if (clockMinutes > 59) {
                    clockHours++;
                    clockMinutes = 0;
                    }
                if (clockMinutes < 10) {
                    minutes = "0" + clockMinutes;
                    }
                if (clockMinutes > 9) {
                    minutes = clockMinutes;
                    }
                if (clockHours > 23) {
                    clockHours = 0;
                    }
                if (clockHours < 12) {
                    AMorPM = "AM";
                    }
                if ((clockHours < 12) && (clockHours > 9)) {
                    hours = clockHours;
                    }
                if ((clockHours < 10) && (clockHours > 0)) {
                    hours = "0" + clockHours;
                    }
                if (clockHours == 0) {
                    hours = 12;
                    }
                if (clockHours > 11) {
                    AMorPM = "PM";
                    }
                if (clockHours == 12) {
                    hours = 12;
                    }
                if (clockHours > 12) {
                    hours = clockHours - 12;
                    }
                clockString = hours + " : " + minutes + " " + AMorPM + " (" + clockZone + ")";
                clockElement.innerHTML = clockString;
                clockSeconds++;
            }
            function onloadEvents() {
            displayClock();
            setInterval(displayClock(), 1000);
            }
            // -->
        </script>


HTML code:
    <body onload="onloadEvents();">
		<div class="body">
            <div class="content">
                <div align="right" id="Clock"></div>
            </div>
    	</div>
        <br />
	</body>

This post has been edited by trickstar34: 12 June 2012 - 07:33 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Updating clock not working

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Updating clock not working

Posted 12 June 2012 - 10:39 PM

line #57. setInterval() expects a function reference, not the return value of a function (unless that is a function itself)

note: the current time in Javascript can be accessed through var dateobj = new Date;
Was This Post Helpful? 0
  • +
  • -

#3 trickstar34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 05-June 09

Re: Updating clock not working

Posted 13 June 2012 - 08:55 AM

View PostDormilich, on 12 June 2012 - 11:39 PM, said:

line #57. setInterval() expects a function reference, not the return value of a function (unless that is a function itself)

note: the current time in Javascript can be accessed through var dateobj = new Date;


I don't understand what you mean, it doesn't return any value, it's supposed to run the code in the clock function top convert the time to AM/PM instead of military hours that the server returns then display it in the div "Clock". But it seems everything works up to there but I don't understand why its not working. And I want to use the server time because I want my site to display the actual time instead of using the time on the clients computer because their time could be set wrong. Is there anything else you see wrong with the code or do you know any ways of rewriting it to work?
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Updating clock not working

Posted 13 June 2012 - 11:59 AM

View Posttrickstar34, on 13 June 2012 - 05:55 PM, said:

I don't understand what you mean, it doesn't return any value, it's supposed to run the code in the clock function

and thatís the problem. any programming language (including JS) does what it is told to do, not what it is supposed to do.

what happens when you call setInterval(displayClock(), 1000);:

- displayClock() executes and returns undefined (because there is no other return value defined)

- the call is now setInterval(undefined, 1000);, which obviously does not work

if you doubt that, consider this:
// according to logic, this is the same as setInterval(displayClock(), 1000);
var x = displayClock();
setInterval(x, 1000);

alert(x);

Was This Post Helpful? 0
  • +
  • -

#5 trickstar34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 05-June 09

Re: Updating clock not working

Posted 13 June 2012 - 09:28 PM

View PostDormilich, on 13 June 2012 - 12:59 PM, said:

View Posttrickstar34, on 13 June 2012 - 05:55 PM, said:

I don't understand what you mean, it doesn't return any value, it's supposed to run the code in the clock function

and thatís the problem. any programming language (including JS) does what it is told to do, not what it is supposed to do.

what happens when you call setInterval(displayClock(), 1000);:

- displayClock() executes and returns undefined (because there is no other return value defined)

- the call is now setInterval(undefined, 1000);, which obviously does not work

if you doubt that, consider this:
// according to logic, this is the same as setInterval(displayClock(), 1000);
var x = displayClock();
setInterval(x, 1000);

alert(x);

So your saying if I make it return a value it will work? I really don't understand this if theres something I missed, I learned Javascript from a book and didn't get taught by anyone to explain this to me so I'm having trouble understanding this concept. Could you show me something I could read to explain this to me? Because for some reason its completely alien to me.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Updating clock not working

Posted 13 June 2012 - 10:37 PM

View Posttrickstar34, on 14 June 2012 - 06:28 AM, said:

So your saying if I make it return a value it will work?

nope. what Iím saying is that it will work if setInterval()ís first parameter is a function data type. i.e. either you pass a function reference or you execute a function that returns a function.
function doSomething()
{
    // ...
}
window.setInteval(doSomething, time);

function doSomethingElse()
{
    // ...

    return function() {
        // ...
    }
}
window.setInteval(doSomethingElse(), time);


Maybe I should add that functions behave like ordinary variables, so-called first-class objects ...
Was This Post Helpful? 0
  • +
  • -

#7 trickstar34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 05-June 09

Re: Updating clock not working

Posted 14 June 2012 - 09:49 AM

So I've been fidgeting with the code and the error is in the displayClock() function. If I change the code to not even try to update it and just call it in the onload parameter it still doesn't add any time to the document when its displayed. Can you see anything wrong with my displayClock() function?
Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Updating clock not working

Posted 14 June 2012 - 09:52 AM

nothing obvious, howís your setInterval() code looking now?
Was This Post Helpful? 0
  • +
  • -

#9 trickstar34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 05-June 09

Re: Updating clock not working

Posted 14 June 2012 - 10:11 AM

View PostDormilich, on 14 June 2012 - 10:52 AM, said:

nothing obvious, howís your setInterval() code looking now?

I changed it to setTimeout and made it recursive like this:
var clockElement = document.getElementById("Clock");
            var clockZone = "CST";
            var clockHours = <% Response.Write(DateTime.Now.Hour.ToString()); %> + 2;
            var clockMinutes = <% Response.Write(DateTime.Now.Minute.ToString()); %>;
            var clockSeconds = <% Response.Write(DateTime.Now.Second.ToString()); %>;
            function displayClock() {
                var AMorPM;
                var hours;
                var minutes;
                var clockString;
                if (clockSeconds > 59) {
                    clockMinutes++;
                    clockSeconds = 0;
                    }
                if (clockMinutes > 59) {
                    clockHours++;
                    clockMinutes = 0;
                    }
                if (clockMinutes < 10) {
                    minutes = "0" + clockMinutes;
                    }
                if (clockMinutes > 9) {
                    minutes = clockMinutes;
                    }
                if (clockHours > 23) {
                    clockHours = 0;
                    }
                if (clockHours < 12) {
                    AMorPM = "AM";
                    }
                if ((clockHours < 12) && (clockHours > 9)) {
                    hours = clockHours;
                    }
                if ((clockHours < 10) && (clockHours > 0)) {
                    hours = "0" + clockHours;
                    }
                if (clockHours == 0) {
                    hours = 12;
                    }
                if (clockHours > 11) {
                    AMorPM = "PM";
                    }
                if (clockHours == 12) {
                    hours = 12;
                    }
                if (clockHours > 12) {
                    hours = clockHours - 12;
                    }
                clockString = hours + " : " + minutes + " " + AMorPM + " (" + clockZone + ")";
                clockElement.innerHTML = clockString;
                clockSeconds++;
                setTimeout(displayClock(), 1000);
            }
            function onloadEvents() {
                displayClock();
            }


It's getting really irritating that its not working yet when examining the code it doesn't seem to have flaws yet it wont work, would you have any other ways of rewriting this?
Was This Post Helpful? 0
  • +
  • -

#10 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Updating clock not working

Posted 14 June 2012 - 10:16 AM

er, I have pointed out the flaw and even given an example how to do it right.
Was This Post Helpful? 0
  • +
  • -

#11 trickstar34  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 48
  • Joined: 05-June 09

Re: Updating clock not working

Posted 16 June 2012 - 02:54 PM

I finally get what you mean, I need to make it setInterval(displayClock, 1000);

Now my code is like this:
            var clockElement = document.getElementById("Clock");
            var clockZone = "CST";
            var clockHours = <% Response.Write(DateTime.Now.Hour.ToString()); %> + 2;
            var clockMinutes = <% Response.Write(DateTime.Now.Minute.ToString()); %>;
            var clockSeconds = <% Response.Write(DateTime.Now.Second.ToString()); %>;
            function displayClock() {
                var AMorPM;
                var hours;
                var minutes;
                var clockString;
                if (clockSeconds > 59) {
                    clockMinutes++;
                    clockSeconds = 0;
                    }
                if (clockMinutes > 59) {
                    clockHours++;
                    clockMinutes = 0;
                    }
                if (clockMinutes < 10) {
                    minutes = "0" + clockMinutes;
                    }
                if (clockMinutes > 9) {
                    minutes = clockMinutes;
                    }
                if (clockHours > 23) {
                    clockHours = 0;
                    }
                if (clockHours < 12) {
                    AMorPM = "AM";
                    }
                if ((clockHours < 12) && (clockHours > 9)) {
                    hours = clockHours;
                    }
                if ((clockHours < 10) && (clockHours > 0)) {
                    hours = "0" + clockHours;
                    }
                if (clockHours == 0) {
                    hours = 12;
                    }
                if (clockHours > 11) {
                    AMorPM = "PM";
                    }
                if (clockHours == 12) {
                    hours = 12;
                    }
                if (clockHours > 12) {
                    hours = clockHours - 12;
                    }
                clockString = hours + " : " + minutes + " " + AMorPM + " (" + clockZone + ")";
                clockSeconds++;
                clockElement.innerHTML = clockString;
            }
           function onloadEvents() {
                displayClock();
                setInterval(displayClock, 1000);
            }


But it still doesn't work though, am I out of luck on achieving this?
Was This Post Helpful? 0
  • +
  • -

#12 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3572
  • View blog
  • Posts: 10,414
  • Joined: 08-June 10

Re: Updating clock not working

Posted 16 June 2012 - 02:55 PM

do you have a demo page?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1