simple javascript appendChild doesn't work

Question

I'm new to web programming. I have tried to draw a table row with JavaScript but it's not working and I don't' know why.

here's the code

<div id="gameDiv"> </div>
<script type="text/javascript">
    public function drawGame(){ 
        var table = document.createElement('table');
        table.setAttribute('style','float:left');
        var startRow = table.insertRow(0);
        var c = 'A'
        for (j=0; j<8; j++) {
            var text = document.createTextNode(c++);
            var cell = startRow.insertCell(j);
            cell.appendChild(text);
        }
        document.getElementById("gameDiv").appendChild(table);
    }
    $(document).ready(function() {
        drawGame();
    };
</script>

JavaScript doesn't currently use access modifiers, like `public`, as you might find in other languages; there's a closing `)` missing for `.ready()` between the `};`; and string values like `'A'` don't support incrementing, as `c++` is attempting. — Jonathan Lonowski, Jun 03 '14 at 22:11
The variable c is also a string, and you cannot increment it with ++. — Andy G, Jun 03 '14 at 22:15
thank you guys, now I have a new problem. how can I show row with alphabets in an incremented way. something like A B C D F... and do it dynamically with a loop — user3503716, Jun 03 '14 at 22:27
@user3503716 http://stackoverflow.com/questions/12504042 (see also my answer ;) ) — Dog Ears, Jun 03 '14 at 22:31

score 5 · Accepted Answer · answered Jun 03 '14 at 22:13

The problem is the fact you use public. Javascript doesn't have public or private, so putting that in front of your function declaration will cause errors. If you open up your console, you'll see an error like:

SyntaxError: Unexpected token function

So to fix this, simply remove the private modifier from your code.

Also, you seem to be missing a closing parenthesis at the end of your code. Instead, you should use this:

$(document).ready(function() {
    drawGame();
});

but that code could also be written much shorter:

$(drawGame);

score 0 · Answer 2 · answered Jun 03 '14 at 22:16

Well, you're getting an error because I think you might be getting your languages mixed up, there's no need to declare a function as public in javascript, it will give you an error.

The drawGame function can just be:

    function drawGame(){ 
        var table = document.createElement('table');
        table.setAttribute('style','float:left');
        var startRow = table.insertRow(0);
        var c = 'A'
        for(j=0; j<8; j++){
            var text = document.createTextNode(c++);
            var cell = startRow.insertCell(j);

            cell.appendChild(text);

        }
}

You're missing a closing `}`. – Joeytje50 Jun 03 '14 at 22:17 — Joeytje50, Jun 03 '14 at 22:17

score 0 · Answer 3 · answered Jun 03 '14 at 22:27

0

Here is kind of working variant http://jsbin.com/hisewamu/4/edit, "$" notion is part from jquery that you should include

answered Jun 03 '14 at 22:27

Yanaki

254
2
4

score 0 · Answer 4 · answered Jun 03 '14 at 22:29

This should get rid of that NaN (Not a Number) nonsense.

<script>
        function drawGame(){ 
        var table = document.createElement('table');
        table.setAttribute('style','float:left');
        var startRow = table.insertRow(0);
        var c = 'A'.charCodeAt()
        for(j=0; j<8; j++){
            var text = document.createTextNode(String.fromCharCode(c++));
            var cell = startRow.insertCell(j);

            cell.appendChild(text);

        }
    document.getElementById("gameDiv").appendChild(table);

    }

    $(document).ready(function() {
    drawGame();

    });
</script>

simple javascript appendChild doesn't work

4 Answers4