Question

我有这个函数有一个第一个循环，它创建一个动态的javascript表。然后将表输出到一个htm。其中的第二个循环是调用倒计时时钟函数，该函数输出到第一个循环中创建的div标签。现在它只在第一个表条目中打印出来。第二个是空白的。我该如何解决这个问题？

 function loadXMLDoc()
{
  var table;
  var i;
  table=("<table>");
  var x=xmlDoc.getElementsByTagName("Product");
    for (i=0;i<x.length;i++)
    {
        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+=("</table>");
 document.getElementById('listinglist').innerHTML=table;
 var y=xmlDoc.getElementsByTagName("Product");
 var z
 for (z=0;z<y.length;z++)
 { 
    countdown(yr,m,d,hr,min);
 }
}
function countdown(yr,m,d,hr,min)
{
    document.getElementById('dday').innerHTML="HH";
    document.getElementById('dhour').innerHTML=dhour;
    document.getElementById('dmin').innerHTML=dmin;
    document.getElementById('dsec').innerHTML=dsec;
}

Answer 1

ID必须在页面中唯一才能正常工作。使用getElementById时，它只会返回其中一个带有该ID的元素。（如果它可以返回不同的元素，它仍然无法猜出你想要的那个。）

您可以在ID中包含计数器以使其唯一：

table += "<td><div id=\"dday" + i + "\"></div></td>";
table += "<td><div id=\"dhour" + i + "\"></div></td>";
table += "<td><div id=\"dmin" + i + "\"></div></td>";
table += "<td><div id=\"dsec" + i + "\"></div></td>";

然后在通话中包含计数器：

countdown(yr, m, d, hr, min, z);

在函数中使用计数器找到正确的元素：

function countdown(yr, m, d, hr, min, i)
{
    document.getElementById('dday' + i).innerHTML = "HH";
    document.getElementById('dhour' + i).innerHTML = dhour;
    document.getElementById('dmin' + i).innerHTML = dmin;
    document.getElementById('dsec' + i).innerHTML = dsec;
}

注意：我不知道您在哪里获得了在通话中使用的变量yr，m，d，hr和min ，以及您获得在函数中使用的变量dhour，dmin和dsec的位置。看起来你宁愿使用函数中的参数，但是没有秒的参数。

工作演示（添加了模拟数据和一些变量声明）：

loadXMLDoc();

function loadXMLDoc()
{
  var table;
  var i;
  table = "<table>";
  var x = [1,2,3];
    for (i=0;i<x.length;i++)
    {
        table += "<tr>";
        table += "<td> Time Left : </td>";
        table += "<td><div id=\"dday" + i + "\"></div></td>";
        table += "<td><div id=\"dhour" + i + "\"></div></td>";
        table += "<td><div id=\"dmin" + i + "\"></div></td>";
        table += "<td><div id=\"dsec" + i + "\"></div></td>";
        table += "</tr>";
    } 
 table += "</table>";
 document.getElementById('listinglist').innerHTML = table;
 var y = [1,2,3];
 var z;
  var yr = 1, m = 2, d = 3, hr = 4, min = 5;
 for (z=0;z<y.length;z++)
 { 
    countdown(yr, m, d, hr, min, z);
 }
}
function countdown(yr, m, d, hr, min, i)
{
  var dhour = 1, dmin = 2, dsec = 3;
    document.getElementById('dday' + i).innerHTML="HH";
    document.getElementById('dhour' + i).innerHTML=dhour;
    document.getElementById('dmin' + i).innerHTML=dmin;
    document.getElementById('dsec' + i).innerHTML=dsec;
}

<div id="listinglist"></div>

Answer 2

因为id使用的是dday。 id必须是唯一的，难怪您在尝试document.getElementById('dday')时反复获取相同的元素。请改用class，或使id唯一。

如果您碰巧将其更改为class

JS

function countdown(yr, m, d, hr, min, i) {
    document.getElementsByClassName('dday')[i].innerHTML = "HH";
}

Answer 3

要捕捉所有选择器，您也可以尝试

   y=xmlDoc.querySelectorAll("Product");

循环中的Document.getElementById只输出一次

3 个答案: