DOMContentLoaded没有加载

时间:2015-05-16 23:27:50

标签: javascript

底部代码尝试在加载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);

}

有什么建议吗?

1 个答案:

答案 0 :(得分:0)

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

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

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

仅供参考,您的代码存在各种问题:

  1. 您似乎正在尝试使用<script>变量将生成的内容添加到页面中,但您在table函数之外执行此操作loadXMLDoc() 1}}变量存在。我认为你应该在函数内部这样做。

  2. 您似乎无法在任何地方实际呼叫table

  3. 您可能需要在致电loadXMLDoc()之前使用DOMContentLoaded,但不需要将其用于loadXMLDoc()功能。

  4. 此处无需插入脚本标记。您可以在插入表格后直接执行所需的任何代码。

  5. 您正在使用同步Ajax,这在浏览器中是一种糟糕的用户体验。您应该使用异步Ajax,这需要一些不同的代码来处理响应。

  6. 我无法想象你实际上需要支持IE5和IE6(甚至是IE7或IE8),所以你可以删除那部分Ajax代码。

  7. 您的倒计时功能似乎是尝试使用不存在的变量名称。

  8. 您正在使用具有相同ID值的多个元素。你不能这样做。 ID必须在HTML文档中是唯一的。