Question

我正在编写一个快捷方式JavaScript文件来制作$date和$time个变量。它应该尽我所能，但它不会显示，谷歌Chrome的调试器显示[Uncaught TypeError: Cannot Read 'firstChild' of null]

这是我的代码：

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);

}

在我的HTML中，我正在做：

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

Answer 1

我想你可能想要这个：

document.getElementById('mdy').innerHTML = string;

或者这个：

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

而不是：

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

那应该照顾错误。（无需从firstChild调用中获取getElementById，默认情况下它已经返回一个节点。）

Answer 2

您要向DOM添加两个占位符元素 - <span id="ymd"></span>和<span id="tstandard">。

然后，在window.onload处理程序中，您尝试不仅更新这两个占位符的内容，还尝试更新DOM中不包含的其他两个元素（id="ymd"和id="tmilitary" ）。由于这一事实，document.getElementById('ymd')（和'tmilitary'）调用正确返回undefined。

您想要移除对ymd和tmilitary功能的调用。

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

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

我还将调用更改为setInterval以简化操作。传递引用更有效，更清晰。

日期和时间的未知JavaScript参考错误时间项目

2 个答案: