Função - Acender, apagar e quebrar lâmpada

Kimo Gordinho · 4 de julho de 2017

Bom dia ^^

Então, tô com um programa aqui, que executa o seguinte:
Ao passar e/ou parar o mouse em cima da lâmpada, a lâmpada acende e ao retirar de cima da lâmpada, apaga e, ao clicar, deve-se quebrar a lâmpada e continuar quebrada só que não tô conseguindo kkkk... já olhei e re-olhei o código e não vejo nada de errado :/

Já tentei também, mudar o "onmousemove" por "onmouseover", mas, não funciona.

O código é esse abaixo

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8"/>
    <title>Teste JavaScript</title>
    <script>
        var quebrada = false;
        function mudaLampada(tipo) {
            if (!quebrada) {
                document.getElementById("luz").src = "_imagens/" + tipo + ".jpg";
                if (tipo == 'lampada-quebrada') {
                    quebrada = true;
                }
            }
        }
    </script>
</head>
<body>
        <h1>Acenda a lâmpada</h1>
    <img src="_imagens/lampada-apagada.jpg" id="luz" onmousemove="mudaLampada('lampada-acesa')" onmouseout="mudaLampada('lampada-apagada')" onclick="mudaLampada('lampada-quebrada')"/>
</body>
</html>

Na verdade, o navegador ou o programa, que eu uso para escrever o código, estava dando conflito. Tive que sair do PC pra resolver assunto particular e então fechei o programa e a janela no navegador com o resultado. Chegando em casa, abri o resultado do código (arquivo HTML) direto no Google Chrome e tava lá, meu programa funcionando perfeitamente bem

Obrigado por tudo ^^

Adriano_web · 17 de julho de 2017

Olá Kimo Gordinho você pode usar um código simples como.

<html>
  <head>
    <title>Lampada</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <img src="_imagens/lampada-apagada.jpg" id="myLuz">
    <script>
        var img = document.getElementById("myLuz");
    	function interruptorOff() {
        	 img.src = "_imagens/lampada-apagada.jpg";
        }
      	
      	function interruptorOn() {
         	 img.src = "_imagens/lampada-acesa.jpg";
        }
      
      	function lampadaQuebrar() {
         	img.src = "_imagens/lampada-quebrada.jpg"; 
        }
      
      	img.addEventListener("mouseover", interruptorOn);
      	img.addEventListener("mouseout", interruptorOff);
      	img.addEventListener("click", lampadaQuebrar);
    </script>
  </body>
</html>

Provavelmente você esqueceu de colocar algumas informações que faltavam no atributo src de sua imagem. Resolvi o problema editando o código com os padrões W3C para que separa HTML de JavaScript.

Kimo Gordinho · 18 de julho de 2017

@Adriano_web Não. Não foi isso. Não esqueci de nada. Eu já tinha resolvido o problema.

Ah... eu também coloquei a tag "RESOLVIDO". Só olhar, faz o favor

Adriano_web · 18 de julho de 2017

A me desculpa, sou novo aqui mais valeu, não tinha observado mesmo a etiqueta.

DiF · 18 de julho de 2017

@Kimo Gordinho @Adriano_web

Olá, por favor evite, de usar a tag para colocar resolvido. Esta tag é usada para encontrar assuntos relacionados.

Não coloquem a tag de resolvido nela ou no título.

Obrigado pela compreensão.

Kimo Gordinho · 21 de julho de 2017

@DiF Ah tá, tranquilo. Eu fiz isso por que eu esperava que com isso o tópico fosse fechado para que não ocorresse novos post's desnecessários, entende ?

DiF · 21 de julho de 2017

@Kimo Gordinho

4 horas atrás, Kimo Gordinho disse:

isso por que eu esperava que com isso o tópico fosse fechado para que não ocorresse novos post's desnecessários, entende ?

Sem problemas quanto a isso.

Quanto mais tópicos tiver, mais movimentação. Não fechamos mais tópicos resolvidos.