Question

它在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：用户名是管理员密码是gogogo

Answer 1

在DOM有机会加载内容之前，您已初始化了脚本。所以当你声明'var countdownOpening = document.getElementById（“countdownOpening”）;'时它实际上并不在页面上，因此无法找到设置变量的控件。

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

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

var countdownOpening;

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

Answer 2

您是否尝试在函数内部放置 document.getElementById（“倒计时打开”）？我的意思是你有倒计时Opening.innerHTML = ...

Answer 3

在调用该ID的javascript函数之前，必须先创建id。创建id为'countdownOpening'的范围。在下面你调用该函数。它应该工作。

喜欢以下

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

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

InnerHTML无法找到ID

3 个答案: