Função não está executando estrutura condicional.

groutmoustache · 19 de maio de 2016

Meu professor ensinou a fazer um exercício simples, onde passamos o mouse em cima de uma lâmpada e acende-a, porém, eu queria fazê-la acender ou apagar com duplo click, mas estou sem sucesso e não sei o motivo.
A lógica do script me parece perfeita, mas por algum motivo a lâmpada não está acendendo ou apagando.

Segue o código:

<!DOCTYPE html>
<html>
<head lang="pt-br">

    <meta charset="UTF-8">

    <title>Teste JavaScript</title>

    <script>

        function mudaLampada() {
            if (mudou == true) {
                arquivo = "../_imagens/lampada-apaga";
                mudou = false;
            } else {
                arquivo = "../_imagens/lampada-acesa.jpg";
                mudou = true;
            }
        }

        document.getElementById('luz').src = arquivo

    </script>

    <link rel="stylesheet" href="testejavascript.css">

</head>
<body>
<section>
    <div id="interface">

        <img src="../_imagens/lampada-apagada.jpg" id="luz" ondblclick="mudaLampada()">

    </div>
</section>
</body>
</html>

Espero que me falem por que não está funcionando.

Até logo!

groutmoustache · 19 de maio de 2016

Na tentativa e erro descobri:

O diretório estava incompleto;
Precisei declarar explicitamente a variável "mudou";
Colocar "document.getElementById", em cada condição.

Acredito que o maior problema era o último listado, porque o parâmetro "onClick" só chama a função, e, não todo o script.

Script final:

<script>

        var mudou = false;
  
        function mudaLampada() {
            if (mudou == false) {
                arquivo = "../_imagens/lampada-acesa.jpg";
                mudou = true;
                document.getElementById("luz").src = arquivo
            } else {
                arquivo = "../_imagens/lampada-apagada.jpg";
                mudou = false;
                document.getElementById("luz").src = arquivo
            }
        }

    </script>