Document.getelementbyid In A Loop Outputs Once Only

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 functi

Solution 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><divid=\"dday" + i + "\"></div></td>";
table += "<td><divid=\"dhour" + i + "\"></div></td>";
table += "<td><divid=\"dmin" + i + "\"></div></td>";
table += "<td><divid=\"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:

functioncountdown(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();

functionloadXMLDoc()
{
  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);
 }
}
functioncountdown(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;
}

<divid="listinglist"></div>

Solution 2:

Because you are using id for dday. id must be unique, no wonder you are getting the same element over and over again when you tried document.getElementById('dday'). Use class instead, or make your id unique.

If you happen to change it to class

JS

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

Solution 3:

for a catching all selectors you can also try

y=xmlDoc.querySelectorAll("Product");