how to make getElementsByClassName work

Question

I been reading about getElmentByClassName but I cant seem to get it work in any browser, The function i have works when o call the ID name, but i would like to be able to call the classname.

Is there any way that don't include Jquery ?

This is what I have, would be awsome with some help. thanks.

<ul><li><button class="testButton">Test button</button></li></ul>

function OnButtonDown (button) {
alert("The class work")
}

function Init () {
    var className = "testButton";
    var button = document.getElementsByClassName(className);
    if (button.addEventListener) {  // all browsers except IE before version 9
        button.addEventListener ("mousedown", function () {
            OnButtonDown (button)
            }, false);
        button.addEventListener ("mouseup", function () {
            OnButtonUp (button)
            }, false);
    }
    else {
        if (button.attachEvent) {   // IE before version 9
            button.attachEvent ("onmousedown", function () {
                OnButtonDown (button)
                });
            button.attachEvent ("onmouseup", function () {
                OnButtonUp (button)
                });
        }
    }
}

@linski how is he supposed to make a short "compilable" example out of a piece of code from a website ...? He already posted enough code to make a clear point of what his problem is and how to solve it. If you dont know the answer then you dont understand the question. — fonZ, Feb 02 '13 at 11:13

micnic · Accepted Answer · 2013-02-02T11:20:06.227

3

getElementsByClassName() returns a collection of HTML elements, you need to access the elements of the collection using their index:

button = document.getElementsByClassName(className)[0];
// your code here

If you have only one element, please consider to use .getElementById().

edited Feb 02 '13 at 11:20

answered Feb 02 '13 at 11:12

micnic

10,915
5
44
55

1

It is getElementsByClassName, not getElementByClassName. I cant suggest edit because it is only one char :) – Soroush Falahati Feb 02 '13 at 11:15
thanks :P it's my habbit to use `.getElementById()` – micnic Feb 02 '13 at 11:19
what what! I didn't know that it returns collection of HTML elements. Well now its works! thank you really really much! – Dymond Feb 02 '13 at 11:19
@micnic, Yeah actually this happen to every developer. Some times I remember this little annoying 's' after two hours of debugging!! – Soroush Falahati Feb 02 '13 at 11:26
@micnic Another question that I have. Is there a way to see class index ? the thing is that every class I have is generated by Js. I could count them by hand, but that's not the point :) – Dymond Feb 02 '13 at 11:35
what do you mean by class index? the index of the class name in the class attribute or the number of elements with this class or something else? – micnic Feb 02 '13 at 12:16

score 2 · Answer 2 · answered Feb 02 '13 at 11:29

2

What @micnic said.

FYI. In the case that document.getElementById() doesn't work for you, here's how you would handle it:

var button = false;
var buttons = document.getElementsByClassName(className);
for (var i=0; i<buttons.length; i++) {
    button = buttons[i];
    // do stuff with button
}

Demo here: http://jsfiddle.net/3pAeM/

answered Feb 02 '13 at 11:29

Ayman Safadi

11,502
1
27
41

This function was actually easier this I didn't have to use the index:) Thanks – Dymond Feb 02 '13 at 11:53

how to make getElementsByClassName work

2 Answers2