I'm trying to write a pretty simple script to set an element's innerHTML to the time. However, Javascript keeps throwing a "Cannot set property 'innerHTML' of undefined" error. During debugging, I've simplified my script to the point that it runs right after element (a <span>) is coded, so I know it should have loaded already. I've also tried running this script as a <body onload= argument - same error. I can't tell what I'm doing wrong.
<div style="position: fixed; right: 10px; top: 10px; width: auto; font-size: 16pt; border: 2px solid #000000;">
<span id="clock">Loading...</span>
<script type="application/x-javascript">
function setClock(spanid){
var d = new Date();
document.getElementById[spanid].innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds;
}
setClock("clock");
</script>
</div>
Any help is appreciated!
I'm trying to write a pretty simple script to set an element's innerHTML to the time. However, Javascript keeps throwing a "Cannot set property 'innerHTML' of undefined" error. During debugging, I've simplified my script to the point that it runs right after element (a <span>) is coded, so I know it should have loaded already. I've also tried running this script as a <body onload= argument - same error. I can't tell what I'm doing wrong.
<div style="position: fixed; right: 10px; top: 10px; width: auto; font-size: 16pt; border: 2px solid #000000;">
<span id="clock">Loading...</span>
<script type="application/x-javascript">
function setClock(spanid){
var d = new Date();
document.getElementById[spanid].innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds;
}
setClock("clock");
</script>
</div>
Any help is appreciated!
Share Improve this question asked Sep 13, 2013 at 5:57 Sean P. McMullenSean P. McMullen 431 gold badge1 silver badge3 bronze badges4 Answers
Reset to default 9You are not calling getElementById, you are attempting to index it. Since it is not an array and does not expose array-like behavior, the result is undefined. Replace your getElementById[spanId] with getElementById(spanId).
[] instead of () in document.getElementById(spanid). getElementById is function, it has to be invoked with () and pass the parameter inside it.
Also missing () after getSeconds()
<div style="position: fixed; right: 10px; top: 10px; width: auto; font-size: 16pt; border: 2px solid #000000;">
<span id="clock">Loading...</span>
<script type="application/x-javascript">
function setClock(spanid){
var d = new Date();
document.getElementById(spanid).innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
setClock("clock");
</script>
</div>
Demo: Fiddle
change [] to ():
function setClock(spanid){
var d = new Date();
document.getElementById(spanid).innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds;
}
And now that you have this fixxed add this:
setInterval(function () {
function setClock(spanid) {
var d = new Date();
document.getElementById(spanid).innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
setClock("clock");
}, 1);
And you have an actual clock :D
EXAMPLE