Question

当我尝试在页面中显示这些函数的结果时，它会返回错误。错误：无法设置属性'innerHTML'的值：object为null或undefined

脚本有效，它们不是我的。我从网上找到的工作实例中得到了它们。

EDITEDL：我确实改变了它，但仍然得到同样的错误

<!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>

Answer 1

替换

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

使用

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

getElementById不需要主题标签（#），这是CSS选择器用于指定它是您正在寻找的id的内容。
（就像一个句号（.）用于类）

另外，从HTML中删除主题标签：

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

而不是：

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

Answer 2

首先，删除＃in

document.getElementById("date")

你不是jQuery，而是纯粹的javascript。

然后，当你打电话

    updatedate();
    setInterval(updatedate, 1000);

HTML代码尚未初始化。

你应该在一个事件上调用它，例如在体内的onLoad：

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

或者获取您想要运行的所有代码并将其放入函数中：

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

然后添加到标记：

<body onLoad="runAtStart();">

最后的想法，也许更好，将函数调用放在正文末尾的脚本中（所有HTML代码都将被初始化）：

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

Answer 3

问题是在DOM准备好之前调用了您的初始updateclock()和updatedate()函数。想想这样：

您的浏览器加载页面。
它会点击<script>标记并开始运行JavaScript。
它尝试运行您的函数并从DOM获取项目（即document.getElementById("date")）。此元素尚未加载，因此返回null。如果该对象不存在，则无法在其上调用.innerHTML。

要解决此问题，您必须在加载时运行脚本。在jQuery中，这是：

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

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

否则，您可以将它们放在函数中，然后将onload="functionName()"属性添加到body标签中。

此外，正如其他人所提到的，您应该将#放在ID中。

Answer 4

好吧，您尝试更新尚未创建的对象...

进行测试只需将javascript移到表格下面..

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

它会起作用。（好吧，我删除了＃，因为自己的DOM ID必须以字母开头）因为我假设您希望将脚本保留在标题中，所以必须对其进行编辑以包含在DOM完全构建之后调用的onLoad函数。

[编辑] 该死的太慢了;）

Answer 5

我不认为给出的任何解决方案与错误消息有任何关系。关键词是“undefined”。这是因为有'innerHTML'元素（“date”和“clock”）的前向引用，即这些元素是在JS试图用'getElementById（）'访问它们之后定义的。因此，要么脚本必须遵循id =“{element}”或'getElementById（）'必须在整个页面之后调用的函数中使用 - 包括这些元素的定义 - 已被读取，例如通过一个按钮。

无法设置属性'innerHTML'的值：object为null或undefined

5 个答案: