javascript - ループ内で増加するはずですが、アラートは常に同じ値を出力します

Question

for ( i = 1; i <= NumOfText; i++ ) {
    var ipBoxName="MyInput"+i;
    var txtBoxAutoNumbering="<input type='text' name='textbx[]' id='TxtBx'  style='width:50px;' value="+i+" />&nbsp;&nbsp;&nbsp;";

    $('#NewlyCreatedSelectBoxes').append(txtBoxAutoNumbering);

    var txtBox="<input type='text' name='textbx[]'/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
    $('#NewlyCreatedSelectBoxes').append(txtBox);

    var Select_SelectionOptions="<select id='SelectOption'><option>Text_Box</option> <option>Text_Area</option><option>Radio_Button</option></select>&nbsp;&nbsp;&nbsp;";
    $('#NewlyCreatedSelectBoxes').append(Select_SelectionOptions);
    var c = document.getElementById("TxtBx").value;
    alert(c);
    var Select_For_Multiple_Choices="<button type='button' onclick='ChildTxtBoxes()' id='Child_Btn'"+i+">Click for child selections</button><br><br>";      
    $('#NewlyCreatedSelectBoxes').append(Select_For_Multiple_Choices);
}

ここでは、「var txtBoxAutoNumbering」変数で表されるテキストボックスの値を出力するアラートを設定しました。Bt 実行しても常に 1 が出力されます。あれですか？

Answer 1

同じ ID を持つ複数の要素を作成しています。これは無効な HTML です。副作用として、ID で取得しようとすると、最初に作成したものしか取得できません。

代わりに次のことを試してください。

var txtBoxAutoNumbering="<input type='text' name='textbx[]' id='TxtBx" + i +"'                 style='width:50px;' value="+i+" />&nbsp;&nbsp;&nbsp;";

と

var c=document.getElementById("TxtBx" + i).value;