javascript - 自调用函数问题javascript

Question

我想在页面加载时使用函数表达式显示日期，然后使用自调用函数更改日期字体颜色。

我认为我走在正确的道路上，但我有两个问题。第一个是，我的代码没有改变文本的颜色。第二个，是我从第一个函数中得到一个控制台错误，说 dateDisplay();没有定义。但是如果我尝试从调用中删除函数名称并只使用 ();运行函数。我得到错误

document.getElementById("dateDisplay").innerHTML = d; is null

我曾尝试更改几项内容，但最终却出现控制台错误。通常我要么得到未定义的函数，要么得到类似上面的错误。

HTML

<div>
    <h2><p id="dateDisplay"></p></h2>
    <p>does this work</p>
</div>

javascript

var d = new Date();
 window.onload = function dateDisplay(){
    document.getElementById("dateDisplay").innerHTML = d;
}
();

(function (){
    document.getElementById("dateDisplay").style.color="red";
})();

我很迷茫，不明白发生了什么。

Answer 1

改为这样做:

window.onload = function(){
    var d = new Date();
    document.getElementById("dateDisplay").innerHTML = d;
    document.getElementById("dateDisplay").style.color = "red";
};

甚至更好:

window.addEventListener("load", function(){
    var d = new Date();
    document.getElementById("dateDisplay").innerHTML = d;
    document.getElementById("dateDisplay").style.color = "red";
});

或者你也可以这样做:

document.addEventListener("DOMContentLoaded", function(){
    var d = new Date(),
        display = document.getElementById("dateDisplay");
    display.innerHTML = d;
    display.style.color = "red";
});