CODEWITHSUNDEEP
javascriptgetelementsbyclassname
Bartłomiej Kuźniar
Bartłomiej Kuźniar

Reputation: 33

getElementByClassName isn't work

I have a problem why I do not want to work it tired for some time. I just started learning js. Thanks great for the help

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <img class="test" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png">
        <img class="test" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png">

        <script>
            var test = document.getElementsByClassName("test");
            test.onclick = function () {
                alert("test");
            };
        </script>
    </body>
</html>

Upvotes: 1

Views: 108

Answers (4)

asmmahmud
asmmahmud

Reputation: 5044

As mentioned in the previous answers, the method document.getElementsByClassName return a NodeList Object which is Array like object with numeric indices (0, 1...) and you can loop through it using for .. in loop or Array.prototype.forEach.call method and can attach the event listener to every node.

var tests = document.getElementsByClassName("test");
var node;
for (node in tests) {
  node.addEventListener("click", function(e){
        // do something
   });
}

Or in the following way:

    var tests = document.getElementsByClassName("test");
    Array.prototype.forEach.call(tests, function(node){
      node.addEventListener("click", function(e){
            // do something
      });
   });

Main point is you have to add event listener to every element.

Upvotes: 0

Starfish
Starfish

Reputation: 3574

You need to add the eventlistener to every element. So you need to loop through the elements because document.getElementsByClassName() returns an array of elements. You can do it like this:

function trigger() {
  alert("test");
}

var test = document.getElementsByClassName("test");

for (var i = 0, j = test.length; i < j; i++) {
  test[i].addEventListener("click", trigger);
}
<!DOCTYPE html>
<html>

<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <img class="test" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png">
  <img class="test" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png">

  <script src="script.js"></script>
</body>

</html>

Upvotes: 1

schaffioverflow
schaffioverflow

Reputation: 510

document.getElementsByClassName("test");

returns an array. You have to loop through that array and apply the onclick to each element.

Upvotes: 0

Gaurang Shah
Gaurang Shah

Reputation: 12920

I am not a javascript developer, but I Think it should be 

var test = document.getElementsByClassName("test")[0];
test.onclick = function (){
    alert("test");
};

as document.getElementsByClassName returns a list.

Upvotes: 0

Related Questions