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

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");