a simple date in javascript

Question

please check my code, I've created a simple date in JS but it's not working, I'm following a tutorial and I have the exact code.

<html> <head>	<title>Clock</title>	<script> function time() {	var time = new Date();	var hours = time.getHours();	var mins = time.getMinutes();	var secs = time.getSeconds();	if (secs<10) {	secs = "0" + secs;	}	if (mins<10) {	secs = "0" + mins;	}	document.getElementById("thetime").innerHTML=hours+":"+mins+":"+secs;	var timer = setTimeout(function(){time()},500); }	</script> </head> <body onload="time()"> <div id="thetime"></div> </body> </html>

Define "not working". Also, you can just do setTimeout(time, 500) — Dave Newton
– Dave Newton, Commented Oct 29, 2014 at 16:14
I've turned your code into a StackOverflow Code Snippet and it appears to work as it should. What's the problem? — James Donnelly
– James Donnelly, Commented Oct 29, 2014 at 16:15
@JamesDonnelly -- Uncaught TypeError: object is not a function is thrown. — tymeJV
– tymeJV, Commented Oct 29, 2014 at 16:15
James, setTimeOut is not called, so @unknownDude doesn't see the time passing every 500 milliseconds. — carlodurso
– carlodurso, Commented Oct 29, 2014 at 16:16
Ah, more reason to support a StackOverflow Code Snippet JavaScript Console! :-) — James Donnelly
– James Donnelly, Commented Oct 29, 2014 at 16:17

Felix Kling · Accepted Answer · 2014-10-29 16:17:23Z

You have function time() {...} and var time = new Date();. The local variable shadows the function, meaning that inside setTimeout(function(){time()},500);, time refers to the Date object, not the function.

Solution: Rename either of them.

Sérgio Mesquita · Accepted Answer · 2014-10-29 16:21:46Z

Also,

replace this part of the code:

if (mins<10) { secs = "0" + mins; }

with this:

if (mins<10) { mins= "0" + mins; }

Y.Puzyrenko · Accepted Answer · 2014-10-29 16:17:33Z

Try using setInterval() instead of timeout

 function time() { //Your stuff here... } var timer = setInterval(function(){time()},500);

Fiddle

Compass · Accepted Answer · 2014-10-29 16:17:51Z

Avoid using the same variable name as function name. It tried to call the variable as a function. Naming it currentTime makes it work.

function time() { var currentTime = new Date(); var hours = currentTime.getHours(); var mins = currentTime.getMinutes(); var secs = currentTime.getSeconds(); if (secs<10) { secs = "0" + secs; } if (mins<10) { secs = "0" + mins; } document.getElementById("thetime").innerHTML=hours+":"+mins+":"+secs; var timer = setTimeout(function(){time()},500); }

why? I think so too, it should be outside the function but in the tutorial its inside and it words. Idk i'Mjust learning JS.
It serves no purpose as it goes out of scope immediately, but it isn't "incorrect" in that it violates no conventions. If there were a possibility of multiple timers, then using var timer could be used to clear timeouts.

blfuentes · Accepted Answer · 2014-10-29 16:25:17Z

You are naming a var var time the same your function time(). You should rename one of them.

For example name your function customTimer. You call this function from the setTimeout and from your onload in the html

<html> <head> <title>Clock</title> <script> function customTimer() { var time = new Date(); var hours = time.getHours(); var mins = time.getMinutes(); var secs = time.getSeconds(); if (secs < 10) { secs = "0" + secs; } if (mins < 10) { mins = "0" + mins; } document.getElementById("thetime").innerHTML = hours + ":" + mins + ":" + secs; var timer = setTimeout(function () { customTimer() }, 500); } </script> </head> <body onload="customTimer()"> <div id="thetime"></div> </body> </html>

Collectives™ on Stack Overflow

a simple date in javascript

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

3 Comments

Comments

Related