Hi guys, I have got a problem with my timer variable in javascript. I can't be able to start the timer every one second to input the clock time in my webpage. I tried to find out but i can't find the solution. here is the html code: <html> <body> <style type="text/css"> #mytextfont { font-family:Arial; font-size:43px; font-style:normal; font-weight:normal; color:e5ee6f; text-decoration:none; text-transform:none; position:absolute; visibility:hidden; overflow:hidden; left:50px; top:40px; width:376px; height:90px; z-index:0; } <span id="text1">this is a text</span> <div id="image1" style="position:absolute; overflow:hidden; left:328px; top:7px; width:164px; height:102px; z-index:0"><img src="/images/picture1.jpg" alt="" title="" border=0 width=164 height=102></div> <div id="image2" style="position:absolute; overflow:hidden; left:492px; top:7px; width:201px; height:102px; z-index:0"><img src="/images/picture2.jpg" alt="" title="" border=0 width=211 height=102></div> <script type="text/javascript" src="keyboard.js"></script> </body> </html> Code (markup): key.js: function clocktimer() { var date = new Date(); var weekday=new Array(7); weekday[0]="Sun"; weekday[1]="Mon"; weekday[2]="Tue"; weekday[3]="Wed"; weekday[4]="Thurs"; weekday[5]="Fri"; weekday[6]="Sat"; var months=new Array(11); months[0]="January"; months[1]="February"; months[2]="March"; months[3]="April"; months[4]="May"; months[5]="June"; months[6]="July"; months[7]="August"; months[8]="September"; months[9]="October"; months[10]="November"; months[11]="December"; var d = date.getDate(); var h = today.getHours(); var m = today.getMinutes(); document.getElementById("datetime").innerHTML =+ h+':'+ m+' '+ weekday[date.getDay()]+' '+ d+' '+ months[date.getMonth()]; } document.onkeydown = function(ev) { ev = ev || event; key = ev.keyCode || ev.which; var image1 = document.getElementById("image1").getElementsByTagName("img")[0]; var image2 = document.getElementById("image2").getElementsByTagName("img")[0]; if(key == 13) { var img1 = image1.src; var img2 = image2.src; if (img1.indexOf('picture1_yellow.jpg') != -1) { if (img2.indexOf('picture2_yellow.jpg') != -1) { document.getElementById("text1").style.visibility = "visible"; document.getElementById("image1").style.visibility = "hidden"; document.getElementById("image2").style.visibility = "hidden"; setInterval("clocktimer",1000); } } } Code (markup): Do you know how i can start the timer in javascript in every one second while update the text in html page? Any advice would be much appreicated. Thanks in advance
There are lots of errors in the code. I would suggest installing firebug and observing the errors one by one using the console. But here is the corrected version anyways: ( I removed the images for convenience) <html> <body> <style type="text/css"> #mytextfont { font-family:Arial; font-size:43px; font-style:normal; font-weight:normal; color:e5ee6f; text-decoration:none; text-transform:none; position:absolute; visibility:hidden; overflow:hidden; left:50px; top:40px; width:376px; height:90px; z-index:0; } </style> <span id="text1">this is a text</span> <div id="datetime"></div> <script type="text/javascript" > function clocktimer() { var date = new Date(); var today = new Date(); var weekday=new Array(7); weekday[0]="Sun"; weekday[1]="Mon"; weekday[2]="Tue"; weekday[3]="Wed"; weekday[4]="Thurs"; weekday[5]="Fri"; weekday[6]="Sat"; var months=new Array(11); months[0]="January"; months[1]="February"; months[2]="March"; months[3]="April"; months[4]="May"; months[5]="June"; months[6]="July"; months[7]="August"; months[8]="September"; months[9]="October"; months[10]="November"; months[11]="December"; var d = date.getDate(); var h = today.getHours(); var m = today.getMinutes(); document.getElementById("datetime").innerHTML = h+':'+ m+' '+ weekday[date.getDay()]+' '+ d+' '+ months[date.getMonth()]; } document.onkeydown = function(ev) { ev = ev || event; key = ev.keyCode || ev.which; if(key == 13) { document.getElementById("text1").style.visibility = "visible"; setInterval("clocktimer()",1000); } } </script> </body> </html> HTML:
Uhm, you seem to be trying to getElementById('datetime') -- but you didn't show us any code that actually has an element with that ID on it. It also seems like you're making life harder wrapping DIV around those IMG for nothing. Of course the incomplete document, no doctype (and therein different js behavior in some browsers!), no block level tag around the SPAN, STYLE tag inside BODY (which is invalid markup, STYLE as a tag goes in HEAD, not BODY), inlined STYLE attribute (which basically makes it presentational markup), wasteful CSS with no condensed properties and worse, absolute positioning on EVERYTHING... Means again I still can't make heads or tails out of what the devil you're trying to accomplish -- it's just apparent you're going about it all wrong... and without the images or a complete document, anything we try to tell you is just going to be a wild guess that is likely NOT going to actually solve your problem. Though it LOOKS like how you're calling setinterval is right -- the only thing I'm really seeing 'wrong' (apart from the oddball function to do the key intercept in the first place and apo layout) is that the element you're trying to target for content replacement is nowhere to be found in the markup you showed us.
Thank you very much for your help kutchbhi. There is a little bit of a problem, the time in the innerhtml is working fine but the time show as "1:1", "1:2", "1:3", "1:4", "01:5" which it supposed to be "01:01", "01:02" "01:03", "01:04", "01:05" and so on. The same things goes for each hour. Do you know how to resolve it?
Javascript's date functions return numbers, not strings, and numbers are not displayed to a fixed width with leading zeros. Usually you have to make your own function to do it since Javascript is a total retard about this. function timePad(n) { return n < 10 ? '0' + n : n; } Code (markup): It's stupid, but it works. document.getElementById("datetime").innerHTML = ( timePad(h) + ':' + timePad(m) + ' ' + weekday[date.getDay()] + ' ' + d + ' ' + months[date.getMonth()] ); Code (markup): Would fix hours and minutes to always be two digits. Oh, you also had "=+" in the original, which is kind-of invalid. (It works, but I wouldn't trust it) -- should have just been "="... unless you wanted to actually add it "+=", but I doubt that was your intent as this looks more like a content replacement. I would also suggest that it might not be a bad idea to do this with the DOM instead of innerHTML. It's faster despite being a bit more code, and doesn't force a reflow or make the scrolling jump in browsers like Opera that do so on a reflow. var target=document.getElementById('datetime'); while (target.firstChild) target.removeChild(target.firstChild); target.appendChild(document.createTextNode( timePad(h) + ':' + timePad(m) + ' ' + weekday[date.getDay()] + ' ' + d + ' ' + months[date.getMonth()] )); Code (markup): I know it's looks more complicated, but it's faster and behaves better... generally speaking this is what you're supposed to be doing these days instead of innerHTML.