CODEWITHSUNDEEP
javascripthtmldom
John White
John White

Reputation: 93

Unable to set value of the property 'innerHTML': object is null or undefined

When I try to display the result of these to functions in my page it returns an error. Error: Unable to set value of the property 'innerHTML': object is null or undefined

The scripts work, they are not mine. I got them from working examples i found online.

EDITEDL: I did change it, but still getting the same error

<!DOCTYPE html>
<html>
<head>
    <style>
        #header {
            font-size: 5em;
        }
    </style>

    <script type="text/javascript">

        function updateclock() {
            var currentTime = new Date();

            var currentHours = currentTime.getHours();
            var currentMinutes = currentTime.getMinutes();
            var currentSeconds = currentTime.getSeconds();

            // Pad the minutes and seconds with leading zeros, if required
            currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
            currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

            // Choose either "AM" or "PM" as appropriate
            var timeOfDay = (currentHours < 12) ? "AM" : "PM";

            // Convert the hours component to 12-hour format if needed
            currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

            // Convert an hours component of "0" to "12"
            currentHours = (currentHours == 0) ? 12 : currentHours;

            // Update the time display
            document.getElementById("clock").innerHTML = (currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay);
        }

        function updatedate() {

            var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

            var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

            var d = new Date();
            var curr_day = d.getDay();
            var curr_date = d.getDate();
            var sup = "";
            if (curr_date == 1 || curr_date == 21 || curr_date == 31) {
                sup = "st";
            }
            else if (curr_date == 2 || curr_date == 22) {
                sup = "nd";
            }
            else if (curr_date == 3 || curr_date == 23) {
                sup = "rd";
            }
            else {
                sup = "th";
            }
            var curr_month = d.getMonth();
            var curr_year = d.getFullYear();

            document.getElementById("date").innerHTML = (d_names[curr_day] + " " + curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year);

        }

        updateclock();
        setInterval(updateclock, 1000);

        updatedate();
        setInterval(updatedate, 1000);

    </script>

</head>
<body>
    <table>
        <tr>
            <td>

            </td>
            <td style="text-align=center" id =header>

            </td>
            <td>
                <span id="date">&nbsp;</span>
                <span id="clock">&nbsp;</span>
            </td>
        </tr>
    </table>
</body>
</html>

Upvotes: 2

Views: 9819

Answers (5)

Apostolos
Apostolos

Reputation: 3445

I don't think any of the solutions given has anything to do with the error message. The key word is "undefined". And this because there is as forward reference to 'innerHTML' elements ("date" and "clock"), i.e. these elements are defined after JS trying to access them with 'getElementById()'. So, either the script has to follow the id="{element}" or 'getElementById()' has to be used in a function to be called after the whole page -- including the definitions of these elements -- has been read, e.g. via a button.

Upvotes: 0

itsid
itsid

Reputation: 811

well, you try to update an object that is not yet created...

for testing just move the javascript below the table..

<table>
    <tr>
        <td>

        </td>
        <td style="text-align=center" id =header>

        </td>
        <td>
            <div id="date">&nbsp;</div>
            <div id="clock">&nbsp;</div>
        </td>
    </tr>
</table>
<script type="text/javascript">

    function updateclock() {
        var currentTime = new Date();

        var currentHours = currentTime.getHours();
        var currentMinutes = currentTime.getMinutes();
        var currentSeconds = currentTime.getSeconds();

        // Pad the minutes and seconds with leading zeros, if required
        currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;
        currentSeconds = (currentSeconds < 10 ? "0" : "") + currentSeconds;

        // Choose either "AM" or "PM" as appropriate
        var timeOfDay = (currentHours < 12) ? "AM" : "PM";

        // Convert the hours component to 12-hour format if needed
        currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

        // Convert an hours component of "0" to "12"
        currentHours = (currentHours == 0) ? 12 : currentHours;

        // Update the time display
        document.getElementById("clock").innerHTML = (currentHours + ":" + currentMinutes + ":" + currentSeconds + " " + timeOfDay);
    }

    function updatedate() {

        var d_names = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");

        var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

        var d = new Date();
        var curr_day = d.getDay();
        var curr_date = d.getDate();
        var sup = "";
        if (curr_date == 1 || curr_date == 21 || curr_date == 31) {
            sup = "st";
        }
        else if (curr_date == 2 || curr_date == 22) {
            sup = "nd";
        }
        else if (curr_date == 3 || curr_date == 23) {
            sup = "rd";
        }
        else {
            sup = "th";
        }
        var curr_month = d.getMonth();
        var curr_year = d.getFullYear();

        document.getElementById("date").innerHTML = (d_names[curr_day] + " " + curr_date + "<SUP>" + sup + "</SUP> " + m_names[curr_month] + " " + curr_year);

    }

    updateclock();
    setInterval(updateclock, 1000);

    updatedate();
    setInterval(updatedate, 1000);

</script>

and it will work. (well I removed the # since afair DOM ids must start with a letter) since I assume you want to keep your script in the header, you must edit it to include an onLoad-function that is called AFTER the DOM is fully build.

[edit] dammit too slow ;)

Upvotes: 1

kube
kube

Reputation: 13944

First, remove the # in

document.getElementById("date")

You are not in jQuery, but in pure javascript.

Then, when you call 

    updatedate();
    setInterval(updatedate, 1000);

HTML code is not yet initialized.

You should call it on an event, onLoad in the body for example :

<body onLoad="updatedate();setInterval(updatedate, 1000);">

Or get all the code you want to run and put it in a function :

function runAtStart()
{
        // Put here all the code you want to launch when page loaded
        updateclock();
        setInterval(updateclock, 1000);
}

And then add to the markup :

<body onLoad="runAtStart();">

Last idea, maybe the better, put the calls to functions in a script at the end of the body (all HTML code will be initiliazed) :

<body>
<table>
    <tr>
        <td>

        </td>
        <td style="text-align=center" id =header>

        </td>
        <td>
            <span id="date">&nbsp;</span>
            <span id="clock">&nbsp;</span>
        </td>
    </tr>
</table>
<script language="javascript>
    updatedate();
    setInterval(updatedate, 1000);    </script>
</body>

Upvotes: 2

Richard Marskell - Drackir
Richard Marskell - Drackir

Reputation: 13302

The problem is that your initial updateclock() and updatedate() functions get called before the DOM is ready. Think about it like this:

  1. Your browser loads the page.
  2. It hits the <script> tag and starts running the JavaScript.
  3. It tries to run your functions and get an item from the DOM (i.e. document.getElementById("date")). This element hasn't loaded yet, so it returns null. If the object doesn't exist, you can't call .innerHTML on it.

To fix this, you have to run the script on load. In jQuery, this is:

$(function() {
    updateclock();
    setInterval(updateclock, 1000);

    updatedate();
    setInterval(updatedate, 1000);
}

Otherwise, you can put them in a function and then add the onload="functionName()" attribute to the body tag.

Additionally, as others have mentioned, you should drop the #s in the IDs.

Upvotes: 3

Cerbrus
Cerbrus

Reputation: 72857

Replace

document.getElementById("#date")
//And
document.getElementById("#clock")

With

document.getElementById("date")
//And
document.getElementById("clock")

getElementById Doesn't require a hashtag (#), that's something CSS selectors use to specifiy it's an id you're looking for.
(Like a period (.) is used for classes)

Also, remove the hashtags from your HTML:

<span id="date">&nbsp;</span>
<span id="clock">&nbsp;</span>

Instead of:

<span id="#date">&nbsp;</span>
<span id="#clock">&nbsp;</span>

Upvotes: 2

Related Questions