Btukfyl

so I have this table form that when you hit submit, it should display the information entered. but it only displays the first input entered. I have another table just like this one that works fine, so it must be a small thing that I'm just not seeing.

The table where you enter data:

<form id="symptomstable" name="symptomstable">

    <table class="symptoms" width="700px" bgcolor="#BDDBCC" border="3" align="center">

        <th><b>Symptoms</b></th>

            <tr>

                <td><input type="text" name="sym1" size="100" id="sym1"></td>

            </tr>

            <tr>

                <td><input type="text" name="sym2" size="100" id="sym2"></td>

            </tr>

            <tr>

                <td><input type="text" name="sym3" size="100" id="sym3"></td>

            </tr>

            <tr>

                <td><input type="text" name="sym4" size="100" id="sym4"></td>

            </tr>

            <tr>

                <td><input type="text" name="sym5" size="100" id="sym5"></td>

            </tr>

            <tr>

                <td><input type="text" name="sym6" size="100" id="sym6"></td>

            </tr>



            <tr>

                <td align="center"><input type="button" value="Submit" name="submit" id="submit" onClick="display1()"/></td>

            </tr>

    </table>

Where it outputs to:

<table width="900px" align="center" border=1> 

    <tr style="background-color:#BDDBCC;"></br>

    <th align="center"><b>Symptoms Log</b></th>

    </tr> 

    <tr>

        <td align="center"><div id="symarea1"></div></td>

    </tr>

    <tr>

        <td align="center"><div id="symyarea2"></div></td>

    </tr>

    <tr>

        <td align="center"><div id="symarea3"></div></td>

    </tr>

    <tr>

        <td align="center"><div id="symarea4"></div></td>

    </tr>

    <tr>

        <td align="center"><div id="symarea5"></div></td>

    </tr>

    <tr>

        <td align="center"><div id="symarea6"></div></td>

    </tr>

    </table>

The javascript:

function display1()

    {

    document.getElementById("symarea1").innerHTML = document.getElementById("sym1").value; 

    document.getElementById("sym1").value = "";

    document.getElementById("symarea2").innerHTML = document.getElementById("sym2").value; 

    document.getElementById("sym2").value = "";

    document.getElementById("symarea3").innerHTML = document.getElementById("sym3").value; 

    document.getElementById("sym3").value = "";

    document.getElementById("symarea4").innerHTML = document.getElementById("sym4").value; 

    document.getElementById("sym4").value = "";

    document.getElementById("symarea5").innerHTML = document.getElementById("sym5").value; 

    document.getElementById("sym5").value = "";

    document.getElementById("symarea6").innerHTML = document.getElementById("sym6").value; 

    document.getElementById("sym6").value = "";

    }

You just have a typo. If you open up your console after trying to submit the form, you will see that you have an error that says Cannot set property 'innerHTML' of null. If you look at the line it refers to, you will see that it references document.getElementById("symarea2").innerHTML = document.getElementById("sym2").value;

In your HTML, the ID of this element is currently symyarea2. See: <td align="center"><div id="symyarea2"></div></td>.

Check out how to use the console in Firefox and Chrome