Multiple text boxes issue

Question

I have created a web page used for spelling exercises. I display everything from SQL like this:

    public void FillPageSpelling()
    {
        ArrayList videoList1 = new ArrayList();

        if (!IsPostBack)
        {
            videoList1 = ConnectionClass.GetSpelling(1);
        }
        else
        {
            int i = Convert.ToInt32(DropDownList1.SelectedValue);
            videoList1 = ConnectionClass.GetSpelling(i);
        }
        StringBuilder sb = new StringBuilder();
        foreach (Spelling sp in videoList1)
        {

            sb.Append(
           string.Format(
               @"<table class='VideoTable'>



<tr>
                <td align='center'><font face='Verdana'> <font size='3'>Level:</font> <font size='2'>{3}</font></font></td>
            </tr>


            <tr>

                <td align='center'><font face='Verdana'> <font size='3'>Sentence:</font> <font size='2'>{1}</font></font></td>
            </tr>


                <tr>
               <td align='center'><font size='3'>Sound:<audio controls><source src=sound/{2}></audio>
                <font face='Verdana'> <font size='2'> </font> </font></td>

                                 </tr>


<tr>



<tr><td align='center'><font face='Verdana'> <font size='3'>Write the word here: <input type=text id=TextBox1></font></font> </td> </tr>    

<td><input type=button value='Check' class='p-userButton' onClick='ButtonClick(document.getElementById(""TextBox1"").value, document.getElementById(""TextBox2"").value);'/></td> 
<td><input type=button value='Cheat' class='p-userButton' onClick='Cheat(document.getElementById(""TextBox2"").value);'  </td>

</tr>

            <tr>



               <td align='center'><font face='Verdana'><input type=text style=display:none id=TextBox2 value={4}></td>


                                 </tr>


</br>


           </table>", sp.SID, sp.Sentence, sp.Audio, sp.Level, sp.Word));
            lblOutput.Text = sb.ToString();

        }

This is how it looks like when I choose level 2 on the dropdown list:

This is the javascript function that checks whether the word is good or not:

<script type="text/javascript">
     function ButtonClick(a, b)
      {
         if (a.toString() == b.toString())
          {
             alert("Correct!");
         }
         else 
         {
             alert("Wrong!");
         }

     }
       </script>

This is how I create the button and call the function:

<input type=button value='Check' class='p-userButton' onClick='ButtonClick(document.getElementById(""TextBox1"").value, document.getElementById(""TextBox2"").value);'/>

Now, this works great with the first sentence, but when I go to the second sentence underneath, and when I type in the word in the textbox, it checks only the first sentence, not the second.

Any ideas on how can I solve this?

Answer 1

Multiple page elements are not supposed to have the same 'id'. That is why you keep getting the first element when using the 'id' to grab the textbox because the 'id's on the textboxes are all the same. You can create an iterator that increments on each pass through the loop and use that to put a unique number on the end of each textbox id (in both the textbox itself and the generated javascript).