getElementsByClassName onclick issue

Question

I'm using Robert Nyman's script to get all elements with same class in document, but it doesn't work with onclick or any other event:

var photo = document.getElementsByClassName("photo_class","img",document.getElementById("photo_wrap")); 
photo.onclick = function(){alert("Finaly!");

Maybe you know how to fix it? Thanks!

Answer 1

I guess photo is an array. If that's the case, try that:

var photo = document.getElementsByClassName(
    "photo_class","img",document.getElementById("photo_wrap")
);

for (var i=0; i < photo.length; i++) {
    photo[i].onclick = function(){
        alert("Finaly!");
    }
};

Answer 2

Try

photo[0].onclick = function(){alert("Finaly!");};

getElementsByClass returns array

Answer 3

Are you trying to do this, by any chance?

var photo = document.querySelector("#photo_wrap img.photo_class");
photo.onclick = function() {alert("Hello!");};

Answer 4

getElementsByClassName takes one parameter, the class name and returns a node list

If you want <img> elements within 'photo_wrap' with class name 'photo_class' to take the same event handler you could do something like this

var container = document.getElementById('photo_wrap');
var elements = container.getElementsByTagName('photo_class');
for(var x = 0; x < elements.length; x++) {
    // ignore anything which is not an <img>
    if(elements[x].nodeName != "IMG") {
       continue;
    }

    elements[x].addEventListener("click",function(){

      // do something when element is clicked
      this.style.backgroundColor = 'red'; // change element bgcolor to red

    },false);
}

Answer 5

Using jquery, you can easily target all the elements which have a specific class and assign an onclick event to it as shown below:

$(".photo_class").click(function(){
                            alert("Finally!")});

If you want to target a specific element which has an id, then you can use the below call:

$("#photo_element_id").click(function(){
                            alert("Finally!")});