Question

I’m writing a shortcut JavaScript file to make $date and $time variables. It should work as far as I can tell, but it won’t display and Google Chrome’s debugger shows a [Uncaught TypeError: Cannot Read 'firstChild' of null]

Here’s my code:

function mdy(){

    var
        h = new Date(),
        year = h.getFullYear(),
        month = h.getMonth() + 1,
        day = h.getDate();

        if(month < 10) { month = "0" + month; }

        if(day < 10) { month = "0" + month; }

        var string = month + "/" + day + "/" + year;

        document.getElementById('mdy').firstChild.nodeValue = string;

}

function ymd(){

    var
        h = new Date(),
        year = h.getFullYear(),
        month = h.getMonth() + 1,
        day = h.getDate();

        if(month < 10) { month = "0" + month; }

        if(day < 10) { month = "0" + month; }

        var string = year + "/" + month + "/" + day;

        document.getElementById('ymd').firstChild.nodeValue = string;

}

var $date = {

    mdy: '<span id="mdy">&nbsp;</span>',
    ymd: '<span id="ymd">&nbsp;</span>'

}

/* $time module */
// this comes in two formats, standard and military. 
// type $time.standard for standard time and $time.military
// for military time
function tstandard(){

    var
        h = new Date(),
        hours = h.getHours(),
        minutes = h.getMinutes();

        minutes = ( minutes < 10 ? "0" : "" ) + minutes;

        var diem = ( hours < 12 ) ? "am" : "pm";

        hours = ( hours > 12 ) ? hours - 12 : hours;

        hours = ( hours == 0 ) ? 12 : hours;

        var string = hours + ":" + minutes + " " + diem;

        document.getElementById("tstandard").firstChild.nodeValue = string;

}

function tmilitary() {

    var
        h = new Date(),
        hours = h.getHours(),
        minutes = h.getMinutes();

        minutes = ( minutes < 10 ? "0" : "" ) + minutes;

        hours = ( hours == 0 ) ? 12 : hours;

        if(hours < 10) { hours = "0" + hours }

        var string = hours + ":" + minutes;

        document.getElementById("tmilitary").firstChild.nodeValue = string;

}

var $time = {

    standard: "<span id='tstandard'>&nbsp;</span>",
    military: "<span id='tmilitary'>&nbsp;</span>"

}

/*! universal body onload function !*/
window.onload = function(){

    mdy(); setInterval('mdy()', 1000);
            ymd(); setInterval('ymd()', 1000);

    tstandard(); setInterval('tstandard()', 1000);
    tmilitary(); setInterval('tmilitary()', 1000);

} 

And in my HTML, I’m doing:

<script>document.write($date.mdy + " - " + $time.standard);</script> 

Answer 1

You are adding two placeholder elements to the DOM – <span id="ymd"></span> and <span id="tstandard">.

Then, in the window.onload handler, you are trying to update contents of not only these two placeholders but also of two other elements which are not in the DOM (id="ymd" and id="tmilitary"). The document.getElementById('ymd') (and 'tmilitary') call correctly returns undefined because of that fact.

You want to remove the calls to the ymd and tmilitary functions.

window.onload = function(){
  mdy();
  setInterval(mdy, 1000);

  tstandard();
  setInterval(tstandard, 1000);
};

I also changed the calls to setInterval to simplify things. Passing references is more efficient and clear.