Function call in Javascript loop fails to work

Question

The problem I am having is whenever I try to loop the newRow() function my web page does not do anything. I tried onload and it still doesn't work. I also used for loop; didn't work either. The table is still empty and the only way I can add another row is by clicking the "New Row" button.

Here is my-webpage.html:

<!doctype html>

<html>
    <head>
        <title>
            My First Webpage
        </title>
    </head>
    <body>
    <script type="text/javascript" src="tables.js">
    </script>
    <h2>Game Development Research</h2>
    <h6>Compiled by Reuben Unicruz</h6>
        <hr>
    <h3><u><em>Games Analysis</em></u></h3>
    <h4>Halo 4</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/HMOWXHlxUM0" frameborder="0" allowfullscreen></iframe>
    <br/>
        <hr>
    <h3><u><em>Game Mechanics</em></u></h3>
    <h4>First Person Shooters</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/13iMO9s-q0c" frameborder="0" allowfullscreen></iframe>
    <br/>
    <h4>Jumping in 2D</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/yuRRPT-Isp4" frameborder="0" allowfullscreen></iframe>
        <hr>
    <h3>Game Ratings</h3>
    <form>
        <table id="GameRating">
            <thead>
                <th>Title</th><th>Genre</th><th>Score</th>
            </thead>
        </table>
        <input type="button" value="New Row" onClick="newRow()"></input>
        <input type="button" value="Delete Last Row" onClick="deleteLastRow()"></input>
    </form>
    </body>
</html>

Here is the tables.js file:

function newRow()
{

    var table = document.getElementById("GameRating");

    var row = table.insertRow(table.rows.length);

    var title = row.insertCell(0);
    var genre = row.insertCell(1);
    var score = row.insertCell(2);

    title.innerHTML = "<input type=\"text\"></input>";
    genre.innerHTML = "<select><option>Platformer</option><option>FPS</option><option>TPS</option></select>";
    score.innerHTML = "<input type=\"text\"></input>";
}

function deleteLastRow()
{
    var table = document.getElementById("GameRating");

    table.deleteRow(table.rows.length - 1);
}

function printHello()
{
    document.write("HELLO!!!<br/>")
}

for (i = 0; i < 3; i++)
{
    newRow();
}

Why does it not work? By the way trincot, the answer you linked to was different from my situation since if I didn't call the newRow() function and used document.write instead, the for loop will work and the document.write function works. Also, the script is already arranged properly.

please add the rest of html part as well, and have a look here: [mcve]. — Nina Scholz, Nov 18 '16 at 21:15
Make sure your code is in a script you put after the content, just before the closing `
` tag. Otherwise it will try to access a table that is not yet available. — trincot, Nov 18 '16 at 21:18

score 0 · Answer 1 · answered Nov 18 '16 at 21:20

Check this snippet. Is this what you were trying to implement?

function newRow()
{

    var table = document.getElementById("GameRating");
    var row = table.insertRow(0);

    var title = row.insertCell(0);
    var genre = row.insertCell(1);
    var score = row.insertCell(2);

    title.innerHTML = "<input type=\"text\"></input>";
    genre.innerHTML = "<select><option>Platformer</option><option>FPS</option><option>TPS</option></select>";
    score.innerHTML = "<input type=\"text\"></input>";
}

<head>
        <title>
            My First Webpage
        </title>
    </head>
    <body>
    <script type="text/javascript" src="tables.js">
    </script>
    <h2>Game Development Research</h2>
    <h6>Compiled by Reuben Unicruz</h6>
        <hr>
    <h3><u><em>Games Analysis</em></u></h3>
    <h4>Halo 4</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/HMOWXHlxUM0" frameborder="0" allowfullscreen></iframe>
    <br/>
        <hr>
    <h3><u><em>Game Mechanics</em></u></h3>
    <h4>First Person Shooters</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/13iMO9s-q0c" frameborder="0" allowfullscreen></iframe>
    <br/>
    <h4>Jumping in 2D</h4>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/yuRRPT-Isp4" frameborder="0" allowfullscreen></iframe>
        <hr>
    <h3>Game Ratings</h3>
    <form>
        <table id="GameRating">
            <thead>
                <th>Title</th><th>Genre</th><th>Score</th>
            </thead>
        </table>
        <input type="button" value="New Row" onClick="newRow()"></input>
        <input type="button" value="Delete Last Row" onClick="deleteLastRow()"></input>
    </form>
    </body>

@AlphaD1, what changes do you need? added elements have no styles, if you want them to have another look, you need to add them classes, id or styles in Javascript code — Commercial Suicide, Nov 18 '16 at 21:31

Function call in Javascript loop fails to work

1 Answers1