0

Here is the code that I am struggling with, I am trying to create the entire thing in javascript so that I can become more comfortable with the language, I am already fairly strong in html/css. When I run the following code on a localhost nothing is displayed, does anyone have any suggestions as to what I am doing wrong here? I am simply trying to draw a table, insert a tr, and then cells which contain the days of the week that are stored in my variable.

document.body.onload(drawcalendar);

var drawcalendar = function () {
var daysofweek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",  "Saturday"];
var table = document.createElement("table");
var row = document.table.appendChild("tr");
for (i = 0; i <= daysofweek.length; i++) {
    document.table.row.insertCell(daysofweek[i]);

  }


}
user3376521
  • 117
  • 1
  • 12
  • 1
    Take a look at [this answer](http://stackoverflow.com/questions/14643617/create-table-using-javascript) which can help you solve this – user3241019 Apr 08 '14 at 07:16

1 Answers1

1

Here's the issues I found:

  1. window.load needs to be assigned a function.
  2. changed drawcalendar to function declaration instead of a function expression so that the function is hoisted. Otherwise, the drawcalendar is not available when assigning to window.load. Alternatively, you could move the window.load assignment below the function expression.
  3. table was being created but not appended to the DOM
  4. how to access the table variable (no “document”)
  5. same with row variable
  6. insertCell takes an index, not the innerHTML
  7. Changed your for loop evaluation from less than or equals to less than.
  8. finally append the created table to the DOM

window.onload = drawcalendar;

function drawcalendar() {
    var daysofweek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday",  "Saturday"],
        table = document.createElement("table"),
        row = document.createElement("tr"),
        len = daysofweek.length,
        cell;

    table.appendChild(row);

    for (var i = 0; i < len; i++) {
        cell = row.insertCell(i);
        cell.innerHTML = daysofweek[i];
  }

  document.getElementsByTagName('body').item(0).appendChild(table);
}
nateyolles
  • 1,851
  • 5
  • 17
  • 23
  • thanks for taking the time to do this i really appreciate it, im at work now but will dive into it tonight! again thanks – user3376521 Apr 08 '14 at 18:48
  • Why is it that the function is not available when you assign it like a variable? – user3376521 Apr 08 '14 at 22:45
  • 1
    Look up hoisting. [link](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html) – nateyolles Apr 09 '14 at 01:21
  • last question, why did you create the undefined cell variable outside of the for loop – user3376521 Apr 09 '14 at 06:49
  • 1
    We declare "cell" at the top of the function and assign it (and reassign it 6 more times) within the loop. This actually goes back to hoisting as well. JavaScript has function level scope (as opposed to Java for example that has block level scope). That means that even if we declare the variable within the for loop, it gets hoisted to the top of the function. It's considered good practice to declare all of your variables at the top of your function. By doing this you will save yourself from some tricky bugs down the road. In fact, we might declare the variable "i" at the top as well. – nateyolles Apr 09 '14 at 17:29