/    Sign up×
Community /Pin to ProfileBookmark

document.getElementById returning null…

Copy linkTweet thisAlerts:
Jul 31.2009

Hey guys…

Although I am not a newbee I am not too knowledged in js and I code in it occasionally, so please excuse the question if it is steight forward…

Now…

Been working on an analogue clock script, customised it exactly to my needs, until I got to the point of calling it in my body…

I am trying to enter the clock inside a div but when I call it by document.getElementById nothing happens. Console on firefox says that it returns null. Initially I thought the error was inside the script, so to test it I called the clock by document.write(). But then it worked fine! It is not what I need it but it shows that the script works (right?)…

Please give me your advise on this as well as any other comments on the script…

I have combined js, styles and html in one file here:

[url]http://homepage.mac.com/p_koumoundouros/.public/analogClock.html[/url]

Thank you in advance!

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorJul 31.2009 — document.write() is not a dynamic method. I have corrected the code for you. Note the way functions are called onload. I have also corrected some other errors: [B]language[/B] is deprecated, use [B]type="text/javascript"[/B] and under an XHTML Doctype you should nest the code inside CDATA islands. And style must also have a [B]type="text/css"[/B].
<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;AnalogClock&lt;/title&gt;
&lt;style type="text/css"&gt;
#clock {
position:relative;
margin:auto;
overflow:visible;
background: url(image.ext) no-repeat;
z-index:995; }
.numbers,.minutes,.hours,.seconds {visibility:hidden;position:absolute;top:0px;left:0px;}
.numbers {
padding-top:10px;
font-size:9px;
font-weight:bold;
text-align:center;
z-index:996; }
.minutes {
width:1px;
height:1px;
font-size:1px;
z-index:997; }
.hours {
width:2px;
height:2px;
font-size:2px;
z-index:998; }
.seconds {
width:1px;
height:1px;
font-size:1px;
z-index:999; }
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
/*&lt;![CDATA[*/
var diameter=400;
var numColor='666666';
var secColor='999999';
var colminutes='cccccc';
var hourColor='000000';
var x=0;
var y=0;
var pi=Math.PI;
var piHalf=pi/2;
var rad=parseInt(diameter) / 2;
var xCenter=parseInt(x) + rad;
var yCenter=parseInt(y) + rad;
var hourLength=1;
var minLength=2;
var secLength=2;
for (var i=0; i&lt;(rad/2)+(rad/16); i++) {hourLength+=1;}
for (var i=0; i&lt;(rad/2)-(rad/8); i++) {minLength+=2; secLength+=2;}
var offset=16;
var numbers=[,1,2,3,4,5,6,7,8,9,10,11,12];
var clock;
function formatTime() {
var now=new Date();
var second = now.getSeconds();
var minute = now.getMinutes();
var hour = now.getHours();
if (hour &gt; 11) {hour -= 12;} else hour = hour;
return [hour,minute,second];
}

function updateClock() {
var time = formatTime();
var secondHand = pi * time[2] / 30 - piHalf;
var minuteHand = pi * time[1] / 30 - piHalf;
var hourHand = pi * time[0] / 6 + pi * parseInt(time[1])/360 - piHalf;
for (var i = 0; i &lt; secLength; i++) {document.getElementById('seconds' + i).style.top = (yCenter + i * Math.sin(secondHand))+'px'; document.getElementById('seconds' + i).style.left = (xCenter + i * Math.cos(secondHand))+'px'; document.getElementById('seconds' + i).style.visibility = 'visible';}
for (var i = 0; i &lt; minLength; i++) {document.getElementById('minutes' + i).style.top = (yCenter + i * Math.sin(minuteHand))+'px'; document.getElementById('minutes' + i).style.left = (xCenter + i * Math.cos(minuteHand))+'px'; document.getElementById('minutes' + i).style.visibility = 'visible';}
for (var i = 0; i &lt; hourLength; i++) {document.getElementById('hours' + i).style.top = (yCenter + i * Math.sin(hourHand))+'px'; document.getElementById('hours' + i).style.left = (xCenter + i * Math.cos(hourHand))+'px'; document.getElementById('hours' + i).style.visibility = 'visible';} setTimeout('updateClock()', 100);
}

var clockDIVopen='&lt;div id="clock" style="width:'+(diameter+offset*2)+'px;height:'+(diameter+offset*2)+'px;"&gt;'; clock=clockDIVopen;
for (var i=1; i&lt;13; i++) {
var cnumDIV='&lt;div id="numbers'+i+'" style="width:'+(offset*2)+'px;height:'+(offset*2)+'px;color:#'+numColor+';" class="numbers"&gt;'+numbers[i]+'&lt;/div&gt;'; clock+=cnumDIV; }
for (var i=0; i&lt;minLength; i++) {
var cminDIV='&lt;div id="minutes'+i+'" style="background:#' + colminutes + ';" class="minutes"&gt;&lt;/div&gt;'; clock+=cminDIV; }
for (var i=0; i&lt;hourLength; i++) {
var chourDIV='&lt;div id="hours'+i+'" style="background:#'+hourColor+';" class="hours"&gt;&lt;/div&gt;'; clock+=chourDIV; }
for (var i=0; i&lt;secLength; i++) {
var csecDIV='&lt;div id="seconds'+i+'" style="background:#'+secColor+';" class="seconds"&gt;&lt;/div&gt;'; clock+=csecDIV; }
var clockDIVclose='&lt;/div&gt;'; clock+=clockDIVclose;

function displayClock() {
if (!document.getElementById) return;
for (var i = 1; i &lt; 13; i++) {
document.getElementById('numbers' + i).style.top = (yCenter - offset + rad * Math.sin(i * pi / 6 - piHalf))+'px';
document.getElementById('numbers' + i).style.left = (xCenter - offset + rad * Math.cos(i * pi / 6 - piHalf))+'px';
document.getElementById('numbers' + i).style.visibility = 'visible';
}
updateClock();
}
window.onload = function(){
document.getElementById('theClock').innerHTML=clock;
displayClock();
}
/*]]&gt;*/
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="theClock"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@astupidnameJul 31.2009 — Try changing this part:
function displayClock() {

if (!document.getElementById) return;

for (var i = 1; i < 13; i++) {

document.getElementById('numbers' + i).style.top = (yCenter - offset + rad * Math.sin(i * pi / 6 - piHalf))+'px';

document.getElementById('numbers' + i).style.left = (xCenter - offset + rad * Math.cos(i * pi / 6 - piHalf))+'px';

document.getElementById('numbers' + i).style.visibility = 'visible';

}

updateClock();

}

document.write(clock);

document.getElementById('theClock').innerHTML=clock;

window.onload = displayClock;
[/quote]

to the following:

function displayClock() {
if (!document.getElementById) return;
document.getElementById('theClock').innerHTML=clock;
for (var i = 1; i &lt; 13; i++) {
document.getElementById('numbers' + i).style.top = (yCenter - offset + rad * Math.sin(i * pi / 6 - piHalf))+'px';
document.getElementById('numbers' + i).style.left = (xCenter - offset + rad * Math.cos(i * pi / 6 - piHalf))+'px';
document.getElementById('numbers' + i).style.visibility = 'visible';
}
updateClock();
}

window.onload = displayClock;
Copy linkTweet thisAlerts:
@ipanossauthorJul 31.2009 — Big thank you to both of you guys, certainly saved me some hours of work...

A combination of both has worked flowlessly!
Copy linkTweet thisAlerts:
@ipanossauthorJul 31.2009 — One more problem...

Now that everything works, last thing I need is to place the whole thing into another div (id="placeholder"). No problem there, but when toggling the visibility of the "placeholder" I was planning to make the clock disappear too. The clock has other plans though...

Here is the new file:

http://homepage.mac.com/p_koumoundouros/.public/analogClockComplete.html

Thanks again...
Copy linkTweet thisAlerts:
@guy_murrayJul 31.2009 — Have a look at this...

http://randomibis.com/coolclock/

Guy
Copy linkTweet thisAlerts:
@ipanossauthorJul 31.2009 — I've seen it (really cool by the way) but my design has to be a little specific for this one...

I've worked a lot to convert generation of the html tags in a way that will give me the exact shape/colors etc that I need plus to strip the code down to the bare essential, I don't want to start from scratch... just for the shake of toggleing the visibility. Plus I've got a feeling that the solution must be as simple as the one to my previous question...

Thanks though...
Copy linkTweet thisAlerts:
@astupidnameJul 31.2009 — The problem is within your program you are messing with the visibility in updateClock and analogClock when you don't really need to. Plus the css declaration of visibility:hidden in the head css for the .numbers,.minutes,.hours,.seconds classes doesn't appear necessary, as you would rather toggle the visibility of the placeholder div instead. And then within toggle your if statement wrongly refers to display property instead of visibility. The corrected version:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>analogClockComplete</title>
<style type="text/css">
@charset "utf-8";
#analogClock{}
#theClock {
position:relative;
margin:0;
overflow:visible;
background: url(image.ext) no-repeat;
z-index:995; }
.numbers,.minutes,.hours,.seconds {position:absolute;top:0px;left:0px;}
.numbers {
padding-top:10px;
font-size:9px;
font-weight:bold;
text-align:center;
z-index:996; }
.minutes {
width:1px;
height:1px;
font-size:1px;
z-index:997; }
.hours {
width:2px;
height:2px;
font-size:2px;
z-index:998; }
.seconds {
width:1px;
height:1px;
font-size:1px;
z-index:999; }
</style>
<script type="text/javascript">
/*<![CDATA[*/
var diameter=200;
var numColor='666666';
var secColor='999999';
var minColor='cccccc';
var hourColor='000000';
var x=0;
var y=0;
var pi=Math.PI;
var piHalf=pi/2;
var rad=parseInt(diameter) / 2;
var xCenter=parseInt(x) + rad;
var yCenter=parseInt(y) + rad;
var hourLength=1;
var minLength=2;
var secLength=2;
for (var i=0; i<(rad/2)+(rad/16); i++) {hourLength+=1;}
for (var i=0; i<(rad/2)-(rad/8); i++) {minLength+=2; secLength+=2;}
var offset=16;
var numbers=[,1,2,3,4,5,6,7,8,9,10,11,12];
function formatTime() {
var now=new Date();
var second=now.getSeconds();
var minute=now.getMinutes();
var hour=now.getHours();
if (hour>11) {hour-=12;} else hour=hour;
return [hour,minute,second];
}
function updateClock() {
var time=formatTime();
var secondHand=pi*time[2]/30-piHalf;
var minuteHand=pi*time[1]/30-piHalf;
var hourHand=pi*time[0]/6+pi*parseInt(time[1])/360-piHalf;
for (var i=0; i<secLength; i++) {
document.getElementById('seconds'+i).style.top=(yCenter+i*Math.sin(secondHand))+'px';
document.getElementById('seconds'+i).style.left=(xCenter+i*Math.cos(secondHand))+'px';
}
for (var i=0; i<minLength; i++) {
document.getElementById('minutes'+i).style.top=(yCenter+i*Math.sin(minuteHand))+'px';
document.getElementById('minutes'+i).style.left=(xCenter+i*Math.cos(minuteHand))+'px';
}
for (var i=0; i<hourLength; i++) {
document.getElementById('hours'+i).style.top=(yCenter+i*Math.sin(hourHand))+'px';
document.getElementById('hours'+i).style.left=(xCenter+i*Math.cos(hourHand))+'px';
}
setTimeout(updateClock, 100);
}
var clockDIVopen='<div id="theClock" style="width:'+(diameter+offset*2)+'px;height:'+(diameter+offset*2)+'px;">';
var clock=clockDIVopen;
for (var i=1; i<13; i++) {
var cnumDIV='<div id="numbers'+i+'" style="width:'+(offset*2)+'px;height:'+(offset*2)+'px;color:#'+numColor+';" class="numbers">'+numbers[i]+'</div>';
clock+=cnumDIV; }
for (var i=0; i<minLength; i++) {
var cminDIV='<div id="minutes'+i+'" style="background:#'+minColor+';" class="minutes"></div>';
clock+=cminDIV; }
for (var i=0; i<hourLength; i++) {
var chourDIV='<div id="hours'+i+'" style="background:#'+hourColor+';" class="hours"></div>';
clock+=chourDIV; }
for (var i=0; i<secLength; i++) {
var csecDIV='<div id="seconds'+i+'" style="background:#'+secColor+';" class="seconds"></div>';
clock+=csecDIV; }
var clockDIVclose='</div>';
clock+=clockDIVclose;
function analogClock() {
if (!document.getElementById) return;
document.getElementById('analogClock').innerHTML=clock;
for (var i=1; i<13; i++) {
document.getElementById('numbers'+i).style.top=(yCenter-offset+rad*Math.sin(i*pi/6-piHalf))+'px';
document.getElementById('numbers'+i).style.left=(xCenter-offset+rad*Math.cos(i*pi/6-piHalf))+'px';
}
updateClock();
}
function toggle(id) {
var e = document.getElementById(id);
if(e.style.visibility == 'visible' || !e.style.visibility) {e.style.visibility = 'hidden';}
else {e.style.visibility = 'visible';}
return false;
}
/*]]>*/
</script>
</head>
<body onload="analogClock();">
<div id="placeholder"><div id="analogClock">analogClock</div></div>
<a href="#" onclick="return toggle('placeholder');">Toggle</a>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@ipanossauthorAug 01.2009 — Thanks a lot mate!!! It makes sence now...

The visibility in updateClock and analogClock were remnants from the original script, difficult to remember why they were there!

The error within the toggle() was forgotten while I was trying to change the diplay to 'hidden' instead. It worked like that but of course it affected the layout of the rest of the page...

Thanks a lot, you've been a great help!
×

Success!

Help @ipanoss spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...