Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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>Até logo!
Na tentativa e erro descobri:
- O diretório estava incompleto;
- Precisei declarar **explicitamente** a variável *"mudou"*;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>Obrigado pela a ajuda, wootzor!
Um conselho: devias começar por declarar "explicitamente" as variáveis usando "var nomeVariavel".
Repara ainda que quando a lâmpada é "apagada", o caminho para a imagem não tem extensão.