Javascript 无法获取<;p>';要更改为LocaleDateString()的内部HTML

Javascript 无法获取<;p>';要更改为LocaleDateString()的内部HTML,javascript,html,css,Javascript,Html,Css,我一直在做一个日历作为测试,我一直遇到这个问题。我使用toLocaleDateString方法创建了一个具有日期的变量。当我试图更改段落的内部HTML时,什么也没发生。这是我的密码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text/css" href="css/st

我一直在做一个日历作为测试,我一直遇到这个问题。我使用toLocaleDateString方法创建了一个具有日期的变量。当我试图更改段落的内部HTML时,什么也没发生。这是我的密码:

    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <meta charset="utf-8" />
    <title>HTML Calendar</title>
    <script>
        var date = new Date().toLocaleDateString();
        document.getElementById("date").innerHTML = date;
    </script>
</head>
<body>
    <p id="clock"></p>
    <div id="cal">
        <div id="headmonth"><p id="date"></p></div>
        <div id="days"></div>
    </div>
</body>
</html>

HTML日历
var date=new date().toLocaleDateString();
document.getElementById(“日期”).innerHTML=日期;


试着将您的
脚本
放在关闭
标记的前面。此外,我建议使用此方法确保脚本在文档准备就绪后执行:

function init() {
    var date = ...
    // your code here
}

window.onload = init;
如果您正在使用jQuery:

$(document).ready(function() {
    var date = ...;
    // your code
}

当前代码无法运行的原因是,由于您将
脚本
放在
标题
中,浏览器尚未加载所有
内容。因此,您的脚本不知道该
p
元素,并且什么也不做。

您试图在加载HTML之前选择该元素。您可以将代码移动到页面末尾,就在
结束标记之前,或添加
窗口。onload
功能类似于:

window.onload = function(){

        var date = new Date().toLocaleDateString();
        document.getElementById("date").innerHTML = date;
}
这样,使用其中一个选项,脚本将在读取HTML后运行,选择器将找到HTML



在window.onload函数中使用代码

不要使用
window.onload
。只有在加载所有内容(包括图像)后才会调用该函数。在页面首次打开和日期元素更新之间会有明显的延迟

您可以像其他人建议的那样,在
之前将javascript包含在文档的底部,但是如果您想将所有脚本保存在
中,您可以检测DOM何时准备就绪。jQuery在检测DOM何时准备就绪方面做得很好。我在下面隔离了他们的代码,它是纯javascript(无jQuery)和跨浏览器兼容的

<script>
    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            init();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                init();
            }
        });
    }

    function init()
    {
        var date = new Date().toLocaleDateString();
        document.getElementById("date").innerHTML = date;
    }
</script>

//Mozilla、Opera和webkit nightlies目前支持此活动
if(document.addEventListener){
//使用方便的事件回调
document.addEventListener(“DOMContentLoaded”,function()){
removeEventListener(“DOMContentLoaded”,arguments.callee,false);
init();
},假);
//如果使用IE事件模型
}否则如果(document.attachEvent){
//确保在装载前开火,
//可能很晚,但对iframes来说也是安全的
document.attachEvent(“onreadystatechange”,function()){
如果(document.readyState==“完成”){
document.detachEvent(“onreadystatechange”,arguments.callee);
init();
}
});
}
函数init()
{
var date=new date().toLocaleDateString();
document.getElementById(“日期”).innerHTML=日期;
}

代码运行时元素不存在。“什么都没有发生”,实际上发生了一些事情,您会收到一条错误消息,告诉控制台类似于
document的内容。getElementById(“日期”)为null或不是对象“
。使用
窗口。onload
仅在加载所有图像、脚本、css、html等后调用此脚本。对于这种情况,这不是一个好的解决方案。@Gavin,我还添加了另一个选项,将代码也放在正文的末尾。我知道。我只是想弄清楚window.onload实际上是做什么的,因为很多人认为这和DOM准备好了是一样的。哦,天哪。现在我明白了问题所在。谢谢你的帮助。