无法设置属性“innerHTML”的值：对象为空或未定义答案

【问题标题】：Unable to set value of the property 'innerHTML': object is null or undefined无法设置属性“innerHTML”的值：对象为空或未定义
【发布时间】：2017-06-23 18:06:19
【问题描述】：

当我尝试在我的页面中将这些结果显示给函数时，它会返回一个错误。错误：无法设置属性“innerHTML”的值：对象为空或未定义

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

编辑：改了，还是一样的错误

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

【问题讨论】：

标签： javascript jquery html ajax dom

【解决方案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>

【讨论】：

实际上，由于他的 HTML 在跨度的id 属性中有#，我们都错了。
@T.J.Crowder：我想我们刚刚有了 htm-punk'd。在两者中添加# 确实有效：P
@Cerbrus：确实如此，如果它真的在这两个地方。
@Cerbrus：事实是，我们的答案不正确（我已经删除了我的）。尽管# 是一个非常糟糕的主意，但它确实有效，而真正的问题已在其他答案中指出。

【解决方案2】：

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

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

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

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

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

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

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

【讨论】：

【解决方案3】：

首先，去掉#中的

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>

【讨论】：

您能否提供一个示例来说明如何运行调用正文中的脚本。我无法让它们在同一行中运行。
我修改了我的答案以更准确。

【解决方案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 必须以字母开头）由于我假设您希望将脚本保留在标题中，因此您必须对其进行编辑以包含一个 onLoad 函数，该函数在 DOM 完全构建后调用。

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

【讨论】：

【解决方案5】：

我认为给出的任何解决方案都与错误消息无关。关键字是“未定义”。这是因为存在对“innerHTML”元素（“日期”和“时钟”）的前向引用，即这些元素是在 JS 尝试使用“getElementById（）”访问它们之后定义的。因此，脚本必须遵循 id="{element}" 或 'getElementById()' 必须在整个页面（包括这些元素的定义）被读取后调用的函数中使用，例如通过一个按钮。

【讨论】：