Jump to content

Qual elemento foi clicado? Problema com GetElementsByClassName


Recommended Posts

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

Brenio Hallison A.M. Filho

 

Link to post
Share on other sites

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 by Zex
  • Vote 1
Link to post
Share on other sites
BHAMF
Posted (edited)
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 by BHAMF

Brenio Hallison A.M. Filho

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.