Чтобы получить доступ к атрибуту класса с помощью 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 код:

<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> 

В выше JS, когда я доступ к имени класса 'clck' с помощью document.getElementsByClassName('clck') не отображается всплывающее окно, но когда мы к нему доступ через «ид» то это работает .. Так что проблема, пожалуйста, объясните

Answer 1

getElementsByClassName возвращает объект, похожий на массив. Проверьте это здесь: getElementsByClassName

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

opnpopup представляет собой массив, содержащий все элементы с классом clck. Вы не можете привязывать события к массивам.

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(); 
    }); 
} 

Этот код должен работать, поэтому вы привязываете событие click ко всем элементам этого массива.