To access class attribute using Prototype JS

Question

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">
    This is a test message
    <div id="cancel" class="cancel" ></div>
</div>

In above js when i access the class name 'clck' by using document.getElementsByClassName('clck') the popup is not displayed but when we access it through 'id' then it works..So whats the issue please explain

Are you sure you're using PrototypeJS? It is a library that like jQuery uses the $() shorthand among lots of other things. I believe you're just making use of the inherent javascript `prototype` property, which is something different than the actual library — Stephan Muller, Sep 10 '14 at 14:16
possible duplicate of [Why getElementsByClassName does not work for me? What does it return?](http://stackoverflow.com/questions/10693845/why-getelementsbyclassname-does-not-work-for-me-what-does-it-return) — Rahil Wazir, Sep 10 '14 at 14:30
But can you tell me when i use document.getElementsByClassName('clck'); its not working instead of this if i use document.getElementById('clck'); then its working. — Tushky, Sep 10 '14 at 14:39
@Tushky That's because document.getElementsByClassName returns an array-like object, check my answer. — TheFrozenOne, Sep 10 '14 at 14:40

TheFrozenOne · Answer 1 · 2014-09-10T15:02:57.933

0

getElementsByClassName returns an array-like object. Check it out here: getElementsByClassName

"Returns an array-like object of all child elements which have all of the given class names."

opnpopup is an array containing all elements with class clck. You can't bind events on arrays.

window.onload = function() {
    var popup = new Popup();

    var opnpopup = document.getElementsByClassName('clck');

    for ( 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, so you bind the click event to all elements in this array.

edited Sep 10 '14 at 15:02

answered Sep 10 '14 at 14:36

TheFrozenOne

1,695
9
19

Thanks for the solution. but write now what happening the popup is displaying but when I click on cancel button the popup is not closing. – Tushky Sep 10 '14 at 14:49
Yes I got the TypeError: opnpopup[index].addEventListener is not a function. – Tushky Sep 10 '14 at 14:59

To access class attribute using Prototype JS

1 Answers1