CODEWITHSUNDEEP
javascripthtml
Sean P. McMullen
Sean P. McMullen

Reputation: 43

'Cannot set property "innerHTML" of undefined'

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!

Upvotes: 4

Views: 18040

Answers (4)

Thanos
Thanos

Reputation: 3059

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

Upvotes: -2

Kiran
Kiran

Reputation: 20313

change [] to ():

function setClock(spanid){
            var d = new Date();
            document.getElementById(spanid).innerHTML = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds;
        }

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

[] 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

Upvotes: 2

Chris Hayes
Chris Hayes

Reputation: 12020

You 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).

Upvotes: 9

Related Questions