JavaScriptでテキストボックスの数を取得する方法

Question

Hクリックすると「テキストを追加」ボタンがあり、テキストボックスが作成されます。JavaScriptのテキストボックスの数を取得するにはどうすればよいですか？今、私が知りたいのですが

<input type="text" name="my_textbox[5]" id="my_textbox5" value="seomthing"/> 

：

<input type="text" name="my_textbox[1]" id="my_textbox1" /> 
<input type="text" name="my_textbox[2]" id="my_textbox2" /> 
<input type="text" name="my_textbox[3]" id="my_textbox3" /> 
<input type="text" name="my_textbox[4]" id="my_textbox4" /> 

私は、私はAJAXから値をフェッチするなど、新しいテキストボックスを追加する新しいテキストボックスを作成していますされてカウントする必要がある理由のようなテキストボックスの数。私がJavaScriptでカウントを得ることができれば最高です。

ありがとうございます。

Answer 1

document.querySelectorAll()を使用して、id（https://www.w3.org/TR/selectors/#attribute-substrings）の部分文字列に一致するすべての要素を取得します。この[[id^= "my_textbox"] '構文は、idで始まるすべての要素を"my_textbox"文字列で開始することを意味します。照会されたコレクションのlengthを取るだけで完了です。以下のスニペットを参照してください：

var textboxCount = document.querySelectorAll('[id^="my_textbox"]').length; 
 
console.log(textboxCount);

<input type="text" name="my_textbox[1]" id="my_textbox1" /> 
 
<input type="text" name="my_textbox[2]" id="my_textbox2" /> 
 
<input type="text" name="my_textbox[3]" id="my_textbox3" /> 
 
<input type="text" name="my_textbox[4]" id="my_textbox4" />

Answer 2

あなたがそれらをグループとして識別できるように、あなたの入力クラス名を与える：

<input class="myInputs" type="text" name="my_textbox[1]" id="my_textbox1" /> 

を次に、あなたのJavaScriptでquerySelectorAll()でそれらを選択して、返されたコレクションの長さを見て：

var inputs = document.querySelectorAll('.myInputs') 
var number_of_inputs = inputs.length