javascript - To access class attribute using Prototype JS -

function popup() {  }  popup.prototype.openpopup = function() {     var div = document.getelementbyid("test");     div.style.display = 'block';         };  popup.prototype.closepopup = function() { var div = document.getelementbyid("test"); div.style.display = 'none'; };   window.onload = function() {     var popup = new popup();      var opnpopup = document.getelementsbyclassname('clck');     opnpopup.addeventlistener('click', function() {         popup.openpopup();     });      var cnclpopup = document.getelementbyid('cancel');     cnclpopup.addeventlistener('click', function() {         popup.closepopup();     });   } 

html code :

<button id="clck" class="clck">click here</button> <div id="test" class="popup">     test message     <div id="cancel" class="cancel" ></div> </div> 

in above js when access class name 'clck' using document.getelementsbyclassname('clck') popup not displayed when access through 'id' works..so whats issue please explain

getelementsbyclassname returns array-like object. check out here: getelementsbyclassname

"returns array-like object of child elements have of given class names."

opnpopup array containing elements class clck. can't bind events on arrays.

window.onload = function() {     var popup = new popup();      var opnpopup = document.getelementsbyclassname('clck');      ( index = 0; index < opnpopup.length; index++ )        opnpopup[ index ].addeventlistener('click', function() {          popup.openpopup();       });      var cnclpopup = document.getelementbyid('cancel');     cnclpopup.addeventlistener('click', function() {         popup.closepopup();     }); } 

this code should work, bind click event elements in array.