using javascript code not for id, but for classes

Question

I have a javascript function MyFunc() that does what it has to do with id="item_for_MyFunc". In the function there is a

var elem = document.getElementById("item_for_MyFunc");

and html body has:

<body onload="MyFunc()">
<p id="item_for_MyFunc">

Everything works, but I want to use this function for several items on the page. That's why I should use <p class="item_for_MyFunc"> several times on the page to be processed by this function, so using id is not a solution.

What changes in the function should be done so it could be changed for class="item_for_MyFunc"?

@Saurabh, What if he is not using JQuery in the page? It would be an overkill to link to JQuery just for the class selection problem, when plain old JS is sufficient. — Ashwin Prabhu
– Ashwin Prabhu, Commented Jul 26, 2012 at 7:26
No, JQuery is not used on my page and I don't want to use JQuery just for this purpose, if possible. — Haradzieniec
– Haradzieniec, Commented Jul 26, 2012 at 7:31

Geuis · Accepted Answer · 2012-07-26 07:21:26Z

So what you're doing there is pretty simple. Let me give you a slightly more robust version:

document.addEventListener('load', function(){

    var elements = document.querySelectorAll('.myClassName');
    for(var i=0, len=elements.length; i<len; i++){
        MyFunc.call( elements[i] );
    }

}, false);

So old versions of IE, 6 and 7 to be specific, don't have querySelectorAll. I'm assuming you aren't worried about them. If you are, there's other ways to do this and I can show you how if you need.

Basically we're giving all of your elements a class of 'myClassName', and querySelectorAll finds all of them and returns an array of DOM elements.

We then iterate through the list, and execute MyFunc on each of those elements.

Edit So one key principal of writing good javascript is to separate the js code from your html markup as much as possible. You should almost never use inline event handlers like onload="myFunc" anymore. Use event handlers written in the js itself.

If you have the option, you should use the jQuery library. It makes a lot of this stuff incredibly easy, has great support for very old browsers, and is used on hundreds of thousands of websites.

Ashwin Prabhu · Accepted Answer · 2012-07-26 07:35:46Z

2

document.getElementsByClassName

would return an array of all HTML elements using the class name. Iterate over the results and you are set. Supported in all browsers except IE <= 8, FF < 3. Works just like document.querySelectorAll (works in IE >= 7, FF >=3.5)

Refer: http://quirksmode.org/dom/w3c_core.html#gettingelements for compatibility chart.

edited Jul 26, 2012 at 7:35

answered Jul 26, 2012 at 7:17

Ashwin Prabhu

7,6545 gold badges54 silver badges83 bronze badges

Comments

Stu · Accepted Answer · 2012-07-26 07:19:53Z

1

You could try:

var elems = document.getElementsByClassName('myClass');

I've not used that one before, but you could use jQuery as that's even simpler;

var elems = $('.myClass');

answered Jul 26, 2012 at 7:19

Stu

4,15026 silver badges43 bronze badges

Collectives™ on Stack Overflow

using javascript code not for id, but for classes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related