Javascript-document.write(）正在工作，但document.innerHTML不起作用;t

Javascript - document.write() is working but document.innerHTML isn't

本文关键字：document innerHTML 不起作用 工作 write Javascript-document      更新时间：2023-09-26

我有一个带有javascript倒计时的页面。倒计时正在工作，很好，但当它到达倒计时时间时，它开始倒计时。它应该更改#nextinternetbroadcast的内容。如果我使用document.write()，它确实会更改内容，但它会覆盖页面（所以我知道if正在工作）。出于某种原因，它只是忽略了clearTimeout()和innerHTML部分。

HTML（为简洁而编辑）：

<div id="nextinternetbroadcast" class="link"></div>
<!-- page specific javascripts -->
<script>
// set a global javascript variable
var nextlivebroadcast;
// tell the function where the JSON data is
fetchJSONFile('http://www.flcbranson.org/api/livebroadcast', function(data){
    // do something with your data
    // alert(JSON.stringify(data));
    // alert(data.datetime + ', ' + data.status);
    nextlivebroadcast = data.nextbroadcast;
});
// see if the global variable is still set (would say "undefined" if using an asychronous connection)
//alert(nextlivebroadcast);
// live broadcast countdown
cdtd(nextlivebroadcast);
</script>

JavaScript（为简洁而编辑）：

// generic get JSON data function
function fetchJSONFile(path, callback) {
    var httpRequest = new XMLHttpRequest();
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = JSON.parse(httpRequest.responseText);
                if (callback) callback(data);
            }
        }
    };
    // false tells it to be synchronous instead of asynchronous
    httpRequest.open('GET', path, false);
    httpRequest.send(); 
}
// start javascript countdown (http://www.developphp.com/view.php?tid=1248)
// don't forget to pass the broadcast variable
function cdtd(broadcast) {
    // just about any standard date format is accepted
    var nextinternetbroadcast = new Date(broadcast);
    var now = new Date();
    var timeDiff = nextinternetbroadcast.getTime() - now.getTime();
    if (timeDiff <= 0) {
        clearTimeout(timer);
        document.getElementById('nextinternetbroadcast').innerHTML = '<a href="javscript:openVideo(' + livepublishingpoint + ');">Join live service now<'/a>';
        // document.innerHTML isn't working but document.write is (but it overwrites the whole page)
        //document.write('Something');
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;
    document.getElementById('nextinternetbroadcast').className += " disabled";
    document.getElementById('nextinternetbroadcast').innerHTML = '<span class="days">' + days + '</span><span class="hours">' + hours + '</span><span class="minutes">' + minutes + '</span><span class="seconds">' + seconds + '</span>';
    // loop the function every second
    var timer = setTimeout(function() { cdtd(broadcast); }, 1000);
}

我是不是做错了什么？I、 当然，我没看到。

编辑（在JavaScript中显示修复程序-感谢Bergi）

// start javascript countdown (http://www.developphp.com/view.php?tid=1248)
// don't forget to pass the broadcast variable
function cdtd(broadcast) {
    // just about any standard date format is accepted
    var nextinternetbroadcast = new Date(broadcast);
    var now = new Date();
    var timeDiff = nextinternetbroadcast.getTime() - now.getTime();
    if (timeDiff <= 0) {
        document.getElementById('nextinternetbroadcast').innerHTML = '<a href="javscript:openVideo(' + livepublishingpoint + ');">Join live service now<'/a>';
        // document.innerHTML isn't working but document.write is (but it overwrites the whole page)
        //document.write('Something');
    } else {
        var seconds = Math.floor(timeDiff / 1000);
        var minutes = Math.floor(seconds / 60);
        var hours = Math.floor(minutes / 60);
        var days = Math.floor(hours / 24);
        hours %= 24;
        minutes %= 60;
        seconds %= 60;
        document.getElementById('nextinternetbroadcast').className += " disabled";
        document.getElementById('nextinternetbroadcast').innerHTML = '<span class="days">' + days + '</span><span class="hours">' + hours + '</span><span class="minutes">' + minutes + '</span><span class="seconds">' + seconds + '</span>';
        // loop the function every second
        setTimeout(function() { cdtd(broadcast); }, 1000);
    }
}

我是不是做错了什么？

是的，您的timer逻辑存在缺陷。目前您正在进行

function fn() {
    if (/* no time left*/) {
        clearTimeout(timer);
        // show end message
    }
    // show countdown
    var timer = setTimeout(fn, 1000);
}

你试图在启动计时器之前清除它。实际上你根本不必这么做，因为那时没有计时器在运行。相反，您要做的是确保计时器不会重新启动。因此，将逻辑更改为

function fn() {
    if (/* no time left*/) {
        // show end message
    } else {
        // show countdown
        setTimeout(fn, 1000);
    }
}

当然，这并不能真正解释为什么你的innerHTML任务不起作用（除非有缺陷的计时器取消导致了一些异常）。

相关文章：