Adding to a with .appendChild

Question

Everytime I try to enter a new cell to the table it doesn't add the text in the bowlersName value. Is there something wrong with my Javascript code? It says "undefined".

<script type="text/javascript">
    /* <![CDATA[ */

    function addBowler() {
        var newBowler = document.getElementsByName('bowlersName').value;
        var tr = document.createElement('tr');
        var td = tr.appendChild(document.createElement('td'));
        td.innerHTML = newBowler;
        document.getElementById("bowlerList").appendChild(tr);
    }
    /* ]]> */
</script>
</head>
<body>
    <!-- HEADER 1 & 2 -->
    <h1>Central Valley Lanes</h1>
    <h2>2008 Bowling Teams</h2>
    Bowler's name <input type="text" name="bowlersName" size="15" /><input type="button" value="Add Bowler" onclick="addBowler()" />

    <h2>Team Roster</h2>   
    <form action="FormProcessor.html" method="get">
        <table border="1" id="bowlerList">
            <tr>
                <td id="empty">Your team roster is empty</td>
            </tr>
        </table>
        <br />
        <input type="button" value="Submit Roster" />
    </form>
</body>

Hugo Marisco · Accepted Answer

Try to change this line:

td.innerHTML = (" + bowlersName + ");

To this:

td.innerHTML = "(" + bowlersName + ")";

Adding <TR> to a <TABLE> with .appendChild

Tags:

javascript

html

ambonjingness

1 Answers

Hugo Marisco

Recent Activity

Donate For Us