Qual elemento foi clicado? Problema com GetElementsByClassName

[BHAMF]

Preciso saber qual elemento foi clicado. Sabendo qual elemento foi clicado, queria transformar isto em número para que eu pudesse colocar na array foto[numero], o número referente à aquela imagem clicada. Tentei algumas coisas que podem parecer inúteis ou inconsequentes para quem já tem experiência em Javascript. Por favor, perdoem-me algum erro pitoresco. Sou iniciante na linguagem e estou dando o meu melhor. Por favor, deem uma olhada no código e me ajudem se tiverem a resposta certa.

 

Eis aqui o HTML: 

<div class="fotos" id="gallery1">
			<img class="fotoArticle " src="img/work/tat1.png" alt=""></img>
			<img class="fotoArticle " src="img/work/tat2.png"></img>
			<img class="fotoArticle " src="img/work/tat3.png"></img>
			<img class="fotoArticle " src="img/work/tat4.png"></img>
			<img class="fotoArticle " src="img/work/tat5.png"></img>
			<img class="fotoArticle " src="img/work/tat6.png"></img>
			<img class="fotoArticle " src="img/work/tat7.png"></img>
			<img class="fotoArticle " src="img/work/tat11.png"></img>
</div>

 

Eis aqui o script:

<script>
			var i = 1;

			var foto = document.getElementsByClassName('fotoArticle');
			console.log(foto);
			for (i; i < 9; i++){
				foto[i] = addEventListener('click', mostrarFoto);
			};
			
			function mostrarFoto() {
				viewer.style.display = 'unset';
				var fotoSRC = foto.src;

				console.log('foto = ' + foto[this].src); //this não funciona
				console.log('fotoSRC = ' + fotoSRC); //src = undefined
				
				console.log('etapa 5');
				var img = document.querySelector('.viewerIMG');
				img.setAttribute('src', fotoSRC);
			}
</script>

Ignorem qualquer coisas não declaradas, porque todo o resto está funcionando como deveria. Apenas deixei aí para deixar claro o entendimento de que este código é pra fazer um visualizador de imagens. Por favor, espero ansiosamente e o mais brevemente possível uma resposta. Isto é tudo. Obrigado desde já!

Edited April 12, 2021 at 07:06 AM by BHAMF

[Zex]

O mais fácil é colocar logo o evento click:

            <img class="fotoArticle"  onClick="mostrarFoto(this.src)" src="img/work/tat1.png" >
            <img class="fotoArticle" onClick="mostrarFoto(this.alt)" src="img/work/tat2.png" alt="ta2.png">

Edited April 12, 2021 at 08:54 AM by Zex

[BHAMF]

Em 12/04/2021 às 05:51, Zex disse:

O mais fácil é colocar logo o evento click:

            <img class="fotoArticle"  onClick="mostrarFoto(this.src)" src="img/work/tat1.png" >
            <img class="fotoArticle" onClick="mostrarFoto(this.alt)" src="img/work/tat2.png" alt="ta2.png">

Muito obrigado pela solução meu caro :)) mas consegui resolver de outra forma e resolvi compartilhar aqui para vocês. Vou colocar as linhas de código a mais que fazem parte do viewer, mas foquem no principal que era conseguir o SRC de um determinado elemento clicado que continha a mesma classe. Para resolver esse problema, percebi que não havia como diferencia-los corretamente sem que realmente houvesse uma diferenciação. Então, para cada elemento, coloquei um ID numérico referente a qual eu queria mostrar dentro da array foto. 

HTML:

<div class="fotos" id="gallery1">
			<img id="0" class="fotoArticle" src="img/work/tat1.png" alt=""></img>
			<img id="1" class="fotoArticle" src="img/work/tat2.png"></img>
			<img id="2" class="fotoArticle" src="img/work/tat3.png"></img>
			<img id="3" class="fotoArticle" src="img/work/tat4.png"></img>
			<img id="4" class="fotoArticle" src="img/work/tat5.png"></img>
			<img id="5" class="fotoArticle" src="img/work/tat6.png"></img>
			<img id="6" class="fotoArticle" src="img/work/tat7.png"></img>
			<img id="7" class="fotoArticle" src="img/work/tat11.png"></img>
</div>

Script:

<script>
			var i = 0;
			var elementoClick = 0;
			console.log('etapa 0');
			var viewer = document.querySelector('.viewer');			
			
			var foto = document.getElementsByClassName('fotoArticle');
			var XViewer = document.getElementsByClassName('XViewer');
				XViewer[0].addEventListener('click', sair);

			function sair(){
				viewer.style.display = 'none';
				var contagem =+ 1;
					console.log(' contagemS = '+ contagem);
			}

			for (i; i < 10; i++){
				foto[i].addEventListener('click', function(evento){
					elementoClick = evento.target.id;					
					mostrarFoto();
				});
			};
			function mostrarFoto(){
					viewer.style.opacity = '1';
					viewer.style.display = 'unset';
					console.log(viewer.style.display);
					
					var fotoSRC = foto[elementoClick].src;

					console.log('EL = '+elementoClick);
					console.log('foto = ' + foto[elementoClick].src);
					console.log('fotoSRC = ' + fotoSRC);
				
					var img = document.querySelector('.viewerIMG');
					img.setAttribute('src', fotoSRC);
			
			}

		</script>

Espero que este código venha a ajudar programadores futuros que nem eu. Embora esteja um pouco "bagunçado" pelas outras linhas de código, foquem no objetivo que finalmente foi alcançado! :)) Obrigado desde já amigos!

Edited April 14, 2021 at 04:31 PM by BHAMF