Exercicio JavaScript

Programação
#1

Bom, estou fazendo um exercio e preciso de uma pequena ajuda, adicionei uma lampada ligada quando é clicado, como faço para quando for clicada novamente ela substua a img?

Obs: Tenho uma imagem de uma luz acesa e outra desligada.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Aprendendo Eventos</title>
	
	<style type="text/css">
		 body{background: #000000;}
		 #lampada{display:block; margin: 20px auto; }
	</style>

	<script type="text/javascript">
			function ligar(){

			window.document.getElementById("lampada").src = "../img/xlamp_on.png";

			}
	</script>
</head>
<body>
	
	<img id="lampada" onclick="ligar();" src="../img/xlamp_off.png">


</body>
</html>
#2

Basicamente o que deve fazer é guardar o estado da lâmpada em uma variável:

var ligado = false; // Inicia desligado

function ligar() {

      if(ligado) {
          // Se ligado trocar a imagem por desligado
          window.document.getElementById("lampada").src = "../img/xlamp_off.png";
       } else {
          // Se desligado trocar a imagem por ligado
	      window.document.getElementById("lampada").src = "../img/xlamp_on.png";
      }

      ligado = !ligado; // inverte o valor de ligado 
}
1 curtida
#3

obrigado pela ajuda, só não entendi muito bem a negação do !ligado. Mais deu certo.

Pensei em colocar dentro do if, alterar para true, e no else alterar para falso não deu certo.

Pela forma que você fez eu pensei assim, se ele for false ele liga, ai já fica como true e por fim inverte ele que no caso seria falso?

1 curtida
#4

Isso mesmo a idéia do operador ! é negação. Então quando ligado recebe !ligado o valor que estiver em ligado será invertido, ou seja, se for false vira true e se for true vira false. Poderia ter colocado dentro dos ifs mas seria repetição de código.

1 curtida
#5

tem razão, mesmo que saia do if else vai continuar. obrigado!

1 curtida
#6

Vlw amigo sua resposta me ajudou muito