Question

底部代码尝试在加载domcontent后调用函数。然而它似乎没有被解雇。该函数输出到动态生成的表中的div。我正在尝试做的是加载倒计时（...）为每个加载到表格上的项目设置倒数计时器。我已经使用了这个addeventlistener，因为我读到在使用div标签之前我需要加载DOM。

此表加载xml文档。

function loadXMLDoc() {
    var table;
    var i;
    var xmlhttp = false;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "auction.xml", false);
    xmlhttp.send();
    xmlDoc = xmlhttp.responseXML;
    table = ("<table>");
    var x = xmlDoc.getElementsByTagName("Product");
    for (i = 0; i < x.length; i++) {
        table += ("<tr><td>Item Name : ");
        table += (x[i].getElementsByTagName("ItemName")[0].childNodes[0].nodeValue);
        iname = (x[i].getElementsByTagName("ItemName")[0].childNodes[0].nodeValue);
        table += ("</td></tr>");
        table += ("<tr><td>Start Price : ");
        table += (x[i].getElementsByTagName("StartPrice")[0].childNodes[0].nodeValue);
        table += ("</td></tr>");
        table += ("<tr><td>Category : ");
        table += (x[i].getElementsByTagName("Category")[0].childNodes[0].nodeValue);
        table += ("</td></tr>");
        table += ("<tr><td>Current Bid : ");
        table += (x[i].getElementsByTagName("BidPrice")[0].childNodes[0].nodeValue);
        icurrent = (x[i].getElementsByTagName("BidPrice")[0].childNodes[0].nodeValue);
        table += ("</td></tr>");
        table += ("<tr><td>Buy It Now Price : ");
        table += (x[i].getElementsByTagName("NowPrice")[0].childNodes[0].nodeValue);
        inow = (x[i].getElementsByTagName("NowPrice")[0].childNodes[0].nodeValue);
        table += ("</td></tr>");
        table += ("<tr><td>Highest Bidder : ");
        table += (x[i].getElementsByTagName("HighestBidder")[0].childNodes[0].nodeValue);
        table += ("</td></tr>");
        var yr = 2018;
        var m = 5;
        var d = 10;
        var hr = 12;
        var min = 12;
        table += ("<tr>");;
        table += ("<td> Time Left : </td>");
        table += ("<td><div id=\"dday\"></div></td>");
        table += ("<td><div id=\"dhour\"></div></td>");
        table += ("<td><div id=\"dmin\"></div></td>");
        table += ("<td><div id=\"dsec\"></div></td>");
        table += ("</tr>");
        table += ("<script>");
        table += ("xmlDoc.addEventListener(\"DOMContentLoaded\",    countdown(yr,m,d,hr,min),false");
        table += ("</script>");
    }
}
table += ("</table>");
document.getElementById('listinglist').innerHTML = table;
//countdown(yr,m,d,hr,min);
}

function countdown(yr, m, d, hr, min) {
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {todayy+=1900;}
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    document.getElementById('dday').innerHTML = "HH";
    document.getElementById('dhour').innerHTML = dhour;
    document.getElementById('dmin').innerHTML = dmin;
    document.getElementById('dsec').innerHTML = dsec;
    setTimeout("countdown(theyear,themonth,theday,thehour,theminute)", 1000);

}

有什么建议吗？

Answer 1

DOMContentLoaded事件用于在加载原始HTML页面时通知您，并且下载的页面HTML中存在的DOM现在可用并可以使用。

您的倒计时器根本不需要使用DOMContentLoaded，因为您确切知道您的内容何时存在（当您自己插入时）。

我不太清楚你正在尝试用倒数计时器做什么，但我认为你可以有一个计时器（你不需要插入{ {1}}标记 - 您可以在插入内容后立即启动自己的计时器，以更新所有倒计时。

仅供参考，您的代码存在各种问题：

您似乎正在尝试使用<script>变量将生成的内容添加到页面中，但您在table函数之外执行此操作loadXMLDoc() 1}}变量存在。我认为你应该在函数内部这样做。
您似乎无法在任何地方实际呼叫table。
您可能需要在致电loadXMLDoc()之前使用DOMContentLoaded，但不需要将其用于loadXMLDoc()功能。
此处无需插入脚本标记。您可以在插入表格后直接执行所需的任何代码。
您正在使用同步Ajax，这在浏览器中是一种糟糕的用户体验。您应该使用异步Ajax，这需要一些不同的代码来处理响应。
我无法想象你实际上需要支持IE5和IE6（甚至是IE7或IE8），所以你可以删除那部分Ajax代码。
您的倒计时功能似乎是尝试使用不存在的变量名称。
您正在使用具有相同ID值的多个元素。你不能这样做。 ID必须在HTML文档中是唯一的。

DOMContentLoaded没有加载

1 个答案: