javascript - Document.getElementById in a loop outputs once only

Question

I have this function that has a first loop that creates a dynamic javascript table.It then outputs the table to a htm. The second loop within it is to call a countdown clock function that outputs to the div tags created in the first loop. For now it only prints out in the first table entry. The second one is blank. How do I solve this?

 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

An id needs to be unique in the page to work properly. When you use getElementById, it will only return one of the elements with that id. (If it could return different elements, it still couldn't guess which one you wanted.)

You can include the counter in the id to make them unique:

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

Then you include the counter in the call:

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

In the function you use the counter to find the right element:

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;
}

Note: I don't know where you get the variables yr, m, d, hr and min that you use in the call, and where you get the variables dhour, dmin and dsec that you use in the function. It seems that you would rather use the parameters in the function, but there is no parameter for seconds.

Working demo (with mocked data, and some variable declarations added):

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>