Javascript função onclick no javascript

Danilo Henriq · 16 de outubro de 2017

Eae galera beleza,

É o seguinte estou com uma duvida, estava tentando fazer com que uma imagem muda-se para outra ao clicar nela, então pesquisei e achei a função onclick do javascript, mas o que eu consegui foi que quando clicado na imagem ela muda-se para outra, porém não consegui achar um método para que quando clica-se novamente na imagem ela volta-se a ser a mesma e assim por diante ou seja ir alternado de uma para outra, deixei o código abaixo.


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>teste_img</title>
    <script type="text/javascript">
        function MudaImg(){
        document.getElementById("img").src = "ico-2.png";
        }
    </script>
    <style media="screen">
      img{
        width:100px;
      }
    </style>
  </head>
  <body>
      <img src="ico.png" id="img" onclick="MudaImg()">
  </body>
</html>

Eu preciso que ao clicar na imagem novamente el volte para imagem "ico.png", se puderem ajudar agradeço.

iHollyZinhO · 16 de outubro de 2017

É muito simples, apenas crie uma variável para controlar quando está ativo ou inativo.

<script type="text/javascript">
	var ControleImagem = 0;
	function MudaImg()
	{
		if(ControleImagem == 0)
		{
			document.getElementById("img").src = "ico-2.png";
			ControleImagem = 1;
		}
		else if(ControleImagem == 1)
		{
			document.getElementById("img").src = "ico.png";
			ControleImagem = 0;
		}
	}
</script>

Caso tenha dúvidas, fique a vontade para me perguntar pelo fórum mesmo.

DiF · 16 de outubro de 2017

@Danilo Henriq

Olá, você não necessariamente precisa criar uma função ou evento de onclick.

Podes usar o jQuery, que na minha opinião, além de ser mais elegante, é mais fácil de fazer.

Veja o exemplo:

HTML:

<img src="https://icon-icons.com/icons2/478/PNG/128/youtube_47003.png" id="img">

jQuery:

$(document).ready(function(){
    var img = $("#img");
    
    img.on('click', function(){
      var src = ($(this).attr("src") === "https://icon-icons.com/icons2/478/PNG/128/youtube_47003.png") ? 
                                         "https://icon-icons.com/icons2/478/PNG/128/facebook_47004.png" : 
                                         "https://icon-icons.com/icons2/478/PNG/128/youtube_47003.png";
   
        $(this).attr("src", src);     
    });
});

Basicamente, o que foi feito é o seguinte:

Criamos uma variável para pegar o nome do elemento.

Com esta variável, atribuímos o evento de "click".

Dentro deste evento, foi criada outra variável para armazenar o valor src, com uma condição de IF Ternário.

Ou seja o IF ternário, resume em apenas uma linha a cadeia de IF normal.

A sintaxe é a seguinte:

variavel = (condição) ? "valor1" : "valor2";

Essse IF é a mesma coisa que:

if(condicao){
   "valor1";
}else{
   "valor2";
}

Basicamente é isso.

Veja o exemplo funcionando: https://jsfiddle.net/dife/qawpmja2/1/

Clique quantas vezes quiser na imagem... vai sempre ficar alterando entre as duas que foi definida.

Felipe Paz · 18 de outubro de 2017

Complementando um pouco mais, quando se trabalha com javascript, toda a interação deve ser feita manualmente. Explicando melhor, vamos supor que você criou um método para alterar a cor de um texto ao clicar sobre ele, para a cor voltar normal quando clicado novamente , você precisa ou criar um novo método, ou no método já criado, fazer alguma função que retorne a cor inicial. É um erro muito comum quando estamos iniciando na programação. Um exemplo é validação de um campo num formulário. Foi criado um método para validar e-mail. O usuário digitou um e-mail inválido e o campo ficou com bordas vermelhas, mas aí, com essa validação, o usuário digitou um e-mail válido mas o campo continua com bordas vermelhas. Então, é preciso criar um outro método para que quando o e-mail seja válido, o campo tenha algum aviso de sucesso ou simplesmente remova as bordas vermelhas. Mesma coisa se aplica nesse da imagem, foi criado um método para ao clicar, a imagem fosse trocada, porém, deve-se ser feita outra chamada em javascript para que quando seja clicada novamente, a imagem original seja recolocada.