не работает .getElementsByClassName

Question

Я хотел сделать modal zoom для нескольких изображении но у меня не работает getElementsByClassName. но если брать каждого отдельно то скрипт работает(через getElementById). Буду очень благодарен за помощь.

var modal = document.getElementById('myModal');
var elem = document.getElementsByClassName('myIm');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
elem.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() { 
    modal.style.display = "none";
}

<img class="myIm" src="d1.jpg" alt="Northern Lights, Norway" width="300" height="200">
<img class="myIm" src="d2.jpg" alt="Northern Lights, Norway" width="300" height="200">
<img class="myIm" src="d3.jpg" alt="Northern Lights, Norway" width="300" height="200">

<div id="myModal" class="modal">
<span class="close">X</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

Answer 1

getElementsByClassName возвращает массив, поэтому elem.onclick работать не будет. Нужно назначать обработчик отдельно для каждого элемента, можно просто циклом:

for (var i = 0; i < elem.length; i++) elem[i].onclick = ...

а можно, например, так:

elem.forEach((div) => { div.onclick = ... });