jQuery错误追加null的子句

时间:2014-07-30 08:38:58

标签: javascript wordpress

我有一个jQuery计时器似乎在JSFiddle中工作正常。但是我的wordpress网站上的相同代码在控制台中给出了错误:

'Uncaught TypeError: Cannot read property 'appendChild' of null'.

似乎无法弄清楚为什么我会收到此错误?

var target_date = new Date('12/08/2014').getTime();

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

// get tag element
var countdown = document.getElementById("ribboncountdown");
var days_span = document.createElement("SPAN");
days_span.className = 'days';
countdown.appendChild(days_span);

// update the tag with id "countdown" 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;


    // format countdown string + set tag value.
    if (days < 0) {
        days_span.innerHTML = '<span>' + days * -1 + '</span>' + ' days since';
    } else {
        days_span.innerHTML = '<span>' + days + '</span>' + ' days to go';
    }



    //ribboncountdown.innerHTML = days + "d,;  

}, 1000);

2 个答案:

答案 0 :(得分:1)

您需要将代码包装在$(document).ready(function(){中,以便在js被触发之前准备好dom。

所以代码:

$( document ).ready(function() {    
var target_date = new Date('12/08/2014').getTime();

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

// get tag element
var countdown = document.getElementById("ribboncountdown");
var days_span = document.createElement("SPAN");
days_span.className = 'days';
countdown.appendChild(days_span);

// update the tag with id "countdown" 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;


    // format countdown string + set tag value.
    if (days < 0) {
        days_span.innerHTML = '<span>' + days * -1 + '</span>' + ' days since';
    } else {
        days_span.innerHTML = '<span>' + days + '</span>' + ' days to go';
    }

    //ribboncountdown.innerHTML = days + "d,;  

}, 1000);

});

答案 1 :(得分:0)

问题是html显示计数器丢失了。为已注销的用户添加此html解决了该问题。谢谢你的帮助