I’m making a calendar for with js using a for loop and append child. when I run the code however, it only appends on the last iteration of the loop

  html, javascript

This is my code, when you click a button the code runs.
when it runs, the table looks like this:
the date is added to Saturday only, but it should be under all of the days of the week

    <script> 
    function button() {
      var node = document.createElement("DIV");
      var textnode = document.createTextNode("date");
      node.appendChild(textnode);
      //document.getElementById("table").appendChild(node);


      var c = 'table';
      //document.getElementById("table");
      for(i = 0; i < 7; i++) {
        c += i;
        console.log(i);
        console.log(c); 
        document.getElementById(c).appendChild(node);
        c = 'table';
        //document.getElementById(c).appendChild(node);
      }
      //document.getElementById(c).appendChild(node);
    }
    </script>

    <table id="table">
                <tr>
                    <th id="table0">Sunday</th>
                    <th id="table1">Monday</th>
                    <th id="table2">Tuesday</th>
                    <th id="table3">Wednesday</th>
                    <th id="table4">Thursday</th>
                    <th id="table5">Friday</th>
                    <th id="table6">Saturday</th>
                </tr>
    </table>

How do I get the .appendChild() to run on every iteration of the loop?

Source: Ask Javascript Questions

LEAVE A COMMENT