NickName:Korty Ask DateTime:2018-05-30T16:54:13

html javascript get length name in div

I need a return count of elements for example name "A"

<div id="box">
  <input name="A" value="123">
  <input name="A" value="456">
</div>

<script type="text/javascript">
  var ii = document.getElementById("box");
  var hh = ii.getElementsByName('A');
  alert(hh.length); // should return 2 but return TypeError
</script>

result: TypeError: ii.getElementsByName is not a function

Thanks for helping!!

Copyright Notice：Content Author:「Korty」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/50600399/html-javascript-get-length-name-in-div

Answers

Ankit Agarwal 2018-05-30T08:56:22

You need to use querySelectorAll('[name=A]') as getElementsByName() is not a function. And see that, it exactly gives the count of A inside of the div with id box since we use ii.querySelectorAll which selects element from the reference of ii.\n\n\r\n\r\nvar ii = document.getElementById(\"box\");\r\nvar hh = ii.querySelectorAll('[name=A]')\r\nalert(hh.length);\r\n<div id=\"box\">\r\n <input name=\"A\" value=\"123\">\r\n <input name=\"A\" value=\"456\">\r\n</div>\r\n<div id=\"box2\">\r\n <input name=\"A\" value=\"123\">\r\n <input name=\"A\" value=\"456\">\r\n</div>",

Mamun 2018-05-30T08:56:40

You can simply use querySelectorAll():\n\n\r\n\r\nvar ii = document.querySelectorAll(\"#box > input[name='A']\");\r\nalert(ii.length); // 2\r\n<div id=\"box\">\r\n <input name=\"A\" value=\"123\">\r\n <input name=\"A\" value=\"456\">\r\n</div>",

Hearner 2018-05-30T08:58:36

Use querySelectorAll\n\n\r\n\r\nconsole.log(document.querySelectorAll('#box [name*=\"A\"]').length);\r\n<div id=\"box\">\r\n <input name=\"A\" value=\"123\">\r\n <input name=\"A\" value=\"456\">\r\n</div>",

Nikhil Aggarwal 2018-05-30T08:58:48

You can use querySelectorAll and pass the hierarchy selector\n\n\r\n\r\n var hh = document.querySelectorAll(\"#box [name='A']\");\r\n console.log(hh.length); // logs 2\r\n<div id=\"box\">\r\n <input name=\"A\" value=\"123\">\r\n <input name=\"A\" value=\"456\">\r\n</div>",

MerlinMa 2018-05-30T08:56:36

getElementsByName is document's function.\n\nvar ii = document.getElementById(\"box\");\nvar hh = document.getElementsByName('A');\nalert(hh.length); \n\n\nor use jquery：\n\n$(\"#box input[name='A']\").length;",