Fiz um exercício usando javascript puro, o exercício pedia para vc clicar em uma imagem de uma lampada "apagada" e, logo em seguida que fosse clicado nessa imagem, o atributo "src"
dela mudasse e recebesse uma outra imagem, que seria a mesma imagem da lampada "acesa". Eu consegui realizar, porém ele funciona apenas uma vez, depois que eu clico ele não se altera novamente.
A minha dúvida é, como eu posso verificar quando um elemento (no caso uma imagem) foi clicada usando apenas javascript puro ? A minha ideia seria pegar quantas vezes a imagem foi clicada e ir alterando o "src
" dela em um loop
.
aqui está o ex que eu fiz mas que funciona apenas uma vez:
Codigo HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<img src="lampada_Apagada.jpg" id="imagem"
onclick="acendeLampada()">
<img src="lampada_Acesa.jpg" id="imagem2" onclick="apagaLampada()">
</div>
<script src="lampada.js" type="text/javascript"></script>
</body>
</html>
Código JavaScript:
function acendeLampada() {
let lampada = document.getElementById('imagem').src =
'lampada_Acesa.jpg'
}
function apagaLampada() {
let lampada = document.getElementById('imagem2').src =
'lampada_Apagada.jpg'
}