CODEWITHSUNDEEP
javascripthtml
user1432124
user1432124

Reputation:

Calculate the number of html element with js

I have multiple div elements with same id='mydiv'.I want to calculate these divs and Iam using the code

document.getElementById('mydiv').length

But it is not working

Upvotes: 1

Views: 254

Answers (3)

Andreas Wong
Andreas Wong

Reputation: 60594

It won't work as getElementById will always return an element with the specified ID and null if the specified ID doesn't exist

From ECMA

 getElementById(elementId) This method returns a Element. The elementId
    parameter is of type DOMString.

What you can do is to assign each div with class

<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>
<div class="mydiv"></div>​​​​​​​​​

And iterate over:

var divs = document.getElementsByTagName('div');
var count = 0;
for(var i = 0; i < divs.length; i++) {
    if(divs[i].className == 'mydiv') count++;
}

alert(count);

If your clients support document.getElementsByClassName(), it's even more concise:

alert(document.getElementsByClassName('mydiv').length)

Upvotes: 1

RobG
RobG

Reputation: 147503

You've been told about multiple elements with the same ID, but in rare cases it might be unavoidable (e.g. an XML document over which you have no control). The only adverse behaviour is that selecting by ID will usually only return the first one (but that's not guaranteed).

You can count elements with the same id by looping over all the elements in the document and counting the ones with a matching id, e.g.

function countSameIds(id) {
  var allNodes = document.getElementsByTagName('*');
  for (var i=allNodes.length, count=0; i; ) {
    if (allNodes[--i].id == id) {
      ++count;
    }
  }
  return count;
}

Upvotes: 0

Stan
Stan

Reputation: 26511

What you should do is use class instead of ID's. ID is for one element only, class is for multiple.

http://jsfiddle.net/d7AHV/

Upvotes: 4

Related Questions