Cannot get table rows to work in Javascript using innerHTML

Question

I have to create a calendar application for a school project using Javascript. The table must created using the innerHTML property. I've managed to get everything to work but for some reason can't figure out why the rows of the calendar aren't being created - all the days are stacked up into one long column. I've inserted the tags in the proper places (I think).

Full JSFiddle is here: https://jsfiddle.net/68294kdh/

var date = new Date();
var month = date.getMonth();
var monthName = getMonthText(month);
var year = date.getFullYear();
var firstDay = new Date(year, month, 1);
var lastDay = getLastDayofMonth(month);

$('month_year').innerHTML = monthName + ' ' + year;

var day = 0;

$('calendar').innerHTML += "<tr>";
for(i=0; i<7; i++) {  
    if(i >= firstDay.getDay()) {
        day++;
        $('calendar').innerHTML += '<td>' + day + '</td>';
    } else {
        $('calendar').innerHTML += '<td>' + ' ' + '</td>';
    }
}
$('calendar').innerHTML += "</tr>";

for(i=0; i<4; i++) {
    $('calendar').innerHTML += '<tr>';
    for(j=0; j<7; j++) {
        if(day < lastDay) {
            day++;
            $('calendar').innerHTML += '<td>' + day + '</td>';
        } else {
            $('calendar').innerHTML += '<td>' + ' ' + '</td>';
        }
    }
    $('calendar').innerHTML += '</tr>';
}

Answer 1

You need to add all of your HTML for the table at the same time. Try something like this:

window.onload = function () {

    var date = new Date();
    var month = date.getMonth();
    var monthName = getMonthText(month);
    var year = date.getFullYear();
    var firstDay = new Date(year, month, 1);
    var lastDay = getLastDayofMonth(month);

    $('month_year').innerHTML = monthName + ' ' + year;

    var day = 0;
    var htmlString = "";
    var htmlString += '<tr>';
    for(i=0; i<7; i++) {  
        if(i >= firstDay.getDay()) {
            day++;
            htmlString += '<td>' + day + '</td>';
        } else {
            htmlString += '<td>' + ' ' + '</td>';
        }
    }
    htmlString += '</tr>';

    for(i=0; i<4; i++) {
        htmlString += '<tr>';
        for(j=0; j<7; j++) {
            if(day < lastDay) {
                day++;
                htmlString += '<td>' + day + '</td>';
            } else {
               htmlString += '<td>' + ' ' + '</td>';
            }
        }
       htmlString += '</tr>';
    }
    $('calendar').innerHTML+=htmlString;
};

Answer 2

That is very inefficient. Try this:

var body = []
var htmlString = "";
var htmlString += '<tr>';
for (i = 0; i < 7; i++) {
  if (i >= firstDay.getDay()) {
    day++;
    htmlString += '<td>' + day + '</td>';
  } else {
    htmlString += '<td>' + ' ' + '</td>';
  }
}
htmlString += '</tr>';
body.push(htmlString)
htmlString = '<tr>'
for (i = 0; i < 4; i++) {
  htmlString += '<tr>';
  for (j = 0; j < 7; j++) {
    if (day < lastDay) {
      day++;
      htmlString += '<td>' + day + '</td>';
    } else {
      htmlString += '<td>' + ' ' + '</td>';
    }
  }
  htmlString += '</tr>';
  body.push(htmlString)

$('calendar').innerHTML = '<tbody>' + body.join('') + '</tbody>'