Images modales avec javascript

Question

J'essaie de créer une galerie d'images simulées en utilisant des images modales.

Javascript est toujours un peu difficile pour moi. J'ai essayé de le faire en utilisant le tutoriel w3schools here, mais j'ai essayé de l'appliquer à plus d'une image, ce qui me semble être le problème.

Existe-t-il un moyen de cibler plusieurs ID? J'ai essayé de changer document.getElementById("_"); à document.getElementsByClassName("_"); mais, toujours pas de chance. Je suis conscient que w3schools a un exemple de galerie modale, mais je ne veux pas que la navigation soit séparée du contenu modal. Je ne veux tout simplement pas que l'image s'ouvre dans un nouvel onglet.

J'ai téléchargé mes progrès here

Si quelqu'un peut aider ou faire briller une lumière dans la bonne direction qui serait grandement apprécié.

var modal = document.getElementById('myModal'); 

var img = document.getElementsByClassName("tokyo"); 
var modalImg = document.getElementsByClassName("modal-content"); 
img.onclick = function() { 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
} 

var span = document.getElementsByClassName("close"); 
    span.onclick = function() { 
    modal.style.display = "none"; 
} 

Answer 1

var img = document.getElementsByClassName("tokyo"); 

retuens un réseau d'éléments. donc vous devriez y accéder avec index.

img[0].onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
}