0

我创建了一个用于拼写练习的网页。我显示来自 SQL 的所有内容，如下所示：

    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();

        }

这是我在下拉列表中选择 2 级时的样子：

在此处输入图像描述

这是检查单词是否正确的javascript函数：

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

     }
       </script>

这就是我创建按钮和调用函数的方式：

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

现在，这对第一个句子很有效，但是当我转到下面的第二个句子时，当我在文本框中输入单词时，它只检查第一个句子，而不是第二个句子。

关于如何解决这个问题的任何想法？

4

1 回答 1

2

多个页面元素不应该具有相同的“id”。这就是为什么在使用“id”抓取文本框时不断获取第一个元素的原因，因为文本框上的“id”都是相同的。您可以创建一个迭代器，该迭代器在每次通过循环时递增，并使用它在每个文本框 id 的末尾放置一个唯一数字（在文本框本身和生成的 javascript 中）。

于 2013-07-26T00:47:29.553 回答