Table created in JavaScript doesn't display; No errors in console?

Question

I'm learning JavaScript and got to the section in my book that described creating new DOM elements like tables, rows, and columns, so I wanted to create a table similar to the periodic table of elements that I could later go back to and fiddle with as I learned new things. My problem is that, from everything that I understand so far, this code should work. Except that it doesn't display anything, and there is nothing showing up in the console in FireFox v29.0.

Ideally, I wanted to create 7 rows (periods) and 18 columns (groups), and then display the elements that were associated at those locations in the table, and then try formatting it (for example, there are empty cells inserted between elements 1 and 18, since the only elements in that period are Hydrogen (1) and Helium (2). An example of this can be seen here: http://www.webelements.com/

However, my first task (creating a basic table) just doesn't seem to work, and either I'm using the wrong terminology or no one has posted about this before (and "javascript periodic table" links mostly to just things like http://www.webelements.com/). Any ideas on what I'm missing here?

<html>
    <head>
        <title>Periodic Table</title>
    </head>
    <body>
        <script>

            var periodicTable = createTable( 7, 18);

            var period = 7;
            var group = 18;

            document.body.appendChild(periodicTable);
            function createTable( period, group ) {
                var elementId = 0;
                var table = document.createElement('table');
                for (var p = 1; p < period; ++p) {
                    var tr = table.appendChild(document.createElement('tr'));
                    for (var g = 1; g < group; ++g) {
                        var element = tr.appendChild(document.createElement('td'));
                        element.innerHTML = ++elementId;
                    }
                }
                return table;
            }
        </script>
</html>

Edit Based on the helpful comments below, I've changed the code to look like this:

        <script>

            var periodicTable = createTable( 7, 18);

            document.body.appendChild(periodicTable);
            function createTable( period, group ) {
                var elementId = 0;
                var table = document.createElement('table');
                for (var p = 1; p < period; ++p) {
                    var tr = table.appendChild(document.createElement('tr'));
                    for (var g = 1; g < group; ++g) {
                        var element = tr.appendChild(document.createElement('td'));
                        element.innerHTML = ++elementId;
                    }
                }
                return table;
            }
        </script>

Why you use global variables in createTable instead of the passed arguments? Those globals are undefined at the time you use them. — Teemu
– Teemu, Commented May 28, 2014 at 21:08
@SalarianEngineer It looks like you fixed it with your edit, but keep in mind that you can still just pass the literals to your function (7, 18) instead of assigning them to variables first. — Shawn Bush
– Shawn Bush, Commented May 28, 2014 at 21:18
Hmm... Please don't edit your post according to comments or answers, they'll become irrelevant if you do so, and future visitors might get confused. — Teemu
– Teemu, Commented May 28, 2014 at 21:22
@Teemu Good idea, I'll go back and edit the changes back. Thanks for bringing that up! — SalarianEngineer
– SalarianEngineer, Commented May 28, 2014 at 21:23
@Victor2748 Thanks for that link. I didn't see that when searching here, but I guess I wasn't using the right terms. One question, though: Why is there a [0] at the end of the getElementsByTagName() method? var body=document.getElementsByTagName('body')[0]; — SalarianEngineer
– SalarianEngineer, Commented May 28, 2014 at 21:27

Teemu · Accepted Answer · 2014-05-29 09:35:04Z

In your original code you had this:

var periodicTable = createTable( 7, 18);
var period = 7;
var group = 18;
document.body.appendChild(periodicTable);
function createTable( rows, cols ) {
                 :
    for (var p = 1; p < period; ++p) {
        var tr = table.appendChild(document.createElement('tr'));
        for (var g = 1; g < group; ++g) {...}
    }
    return table;
}

Thought vars are hoisted, i.e. variables are declared at the beginning of the scope, they are not initialized, values are assigned where ever an assignment is met. In your code period and group have value undefined until they are given values, after createTable has been executed.

You pass two arguments to createTable(), where their names are rows and cols. However, when you're needing those values, you use global variables period and group, which are undefined at the time the function is executed (they get their values after function has been finished).

To fix this, just rename the arguments rows and cols to period and group, and consider to remove the global variables (if they are not needed somewhere else ofcourse).

Collectives™ on Stack Overflow

Table created in JavaScript doesn't display; No errors in console?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related