2

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

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

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

5 回答 5

2

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

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

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

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

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

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

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

于 2013-02-05T15:16:15.240 回答
2

代替

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>
于 2013-02-05T15:10:31.423 回答
2

首先，去掉#中的

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>
于 2013-02-05T15:15:46.633 回答
1

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

测试只需将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 函数。

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

于 2013-02-05T15:46:26.867 回答
0

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

于 2017-06-23T10:06:19.693 回答