InnerHTML 找不到 ID答案

【问题标题】：InnerHTML cannot find the IDInnerHTML 找不到 ID
【发布时间】：2014-01-24 18:25:41
【问题描述】：

它在 JSFiddle 中有效，但在我的代码中，innerHTML 调用不起作用，因为它似乎找不到指定的 ID。但我可以在页面上清楚地看到它。

代码用于倒数计时器。代码如下：

<script>
// set the date we're counting down to
var target_date = new Date("Aug 15, 2019").getTime();

// variables for time units
var days, hours, minutes, seconds;

// get tag element
var countdownOpening = document.getElementById("countdownOpening");

// update the tag with id "countdownOpening" every 1 second
setInterval(function () {

    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;

    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;

    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);

    // format countdown string + set tag value
    countdownOpening.innerHTML = days + "d, " + hours + "h, "
    + minutes + "m, " + seconds + "s";  

}, 1000);
</script>

控制台中的错误似乎直到调用 .innerHTML 时才出现，所以我认为其余的工作正常。

countdownOpening.innerHTML = days + "d, " + hours + "h, "
        + minutes + "m, " + seconds + "s";

这是页面上的 ID：

<span id="countdownOpening"></span>

我不明白为什么在查找该元素时遇到问题。

Uncaught TypeError: Cannot set property 'innerHTML' of null index.html:39
(anonymous function)

并且错误每秒计数一次，所以我认为它在倒计时方面有效，但无法更新跨度。

Live link: 用户名是 admin 密码是 gogogo

【问题讨论】：

将 console.log(countdownOpening); 添加到您的 setInterval 中，您的 setInterval 中似乎由于某种原因没有该变量，因此必须将其删除或取消设置或其他地方。
@Steven 我尝试了控制台但一无所获。尝试了一个警报，它拉回了空值。但是 var 应该是全局的？

标签： jquery innerhtml

【解决方案1】：

在 DOM 有机会加载内容之前，您已经初始化了脚本。因此，当您声明 'var countdownOpening = document.getElementById("countdownOpening");'它实际上还没有在页面上，所以它找不到设置变量的控件。

您应该将脚本移动到页面底部，以便内容已加载。

另外，由于您使用的是 JQuery，您可以在文档就绪函数中初始化变量：

var countdownOpening;

$(document).ready(function(){ countdownOpening = document.getElementById("countdownOpening"); })

【讨论】：

请注意，如果您使用的是 jQuery，如果您只将 jQuery 用于 document.ready，请尝试并尽可能多地使用它（即countdownOpening = $('#countdownOpening');）。 domReady ;)

【解决方案2】：

您是否尝试过将 document.getElementById("countdownOpening") 放入函数中？我的意思是你有 countdownOpening.innerHTML = ...

【讨论】：

定义一个变量并使用它不是更好吗？
刚试了一下，还是不行。还尝试在 setInterval 函数中使用警报来拉回 countdownOpening 并获取 null

【解决方案3】：

您必须在调用该 ID 的 javascript 函数之前创建该 ID。创建 ID 为“countdownOpening”的跨度。在此之下，您调用该函数。它应该可以工作。

喜欢下面这个

<span id="countdownOpening"></span>

<script>
    //call the function here
</script>

【讨论】：