1

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'

}

2 Respostas 2

3

No javascript, cria uma variável onde você vai armazenar o estado atual da lâmpada. Dessa forma você consegue controlar depois melhor se a lâmpada está acesa ou não. Por exemplo:

let lampada = false;

function acendeLampada() {

    if (lampada) {

        document.getElementById('imagem').src = 'lampada_Apagada.jpg'

        lampada = false;
    }
    else {

        document.getElementById('imagem').src = 'lampada_Acesa.jpg'

        lampada = true;
    }
}

No HTML, você apaga uma das tag IMG, mantém essa aqui:

<img src="lampada_Apagada.jpg" id="imagem" onclick="acendeLampada()">
1
  • 1
    Muito Obrigado !
    – Pedro
    Commented 22/08/2019 às 0:00
0

Só uma das muitas maneiras que pode ser feito, basicamente muda a imagem conforme a condição do contador:

let count = 0;

document.getElementById('imagem').addEventListener('click', function() {
  count++;
  
  if(count %2 != 0) this.src = 'https://www.placecage.com/200/300';
  else this.src = 'https://www.placecage.com/g/200/300';
})
<img src="https://www.placecage.com/g/200/300" id="imagem">

7
  • vamo la, eu nao entendi a parte do [0] e nem a parte do this.src , pq elas sao necessárias ? Obrigado desde já !
    – Pedro
    Commented 21/08/2019 às 23:39
  • Certo Giovanni, o [0] quando faço isto document.getElementsByTagName eu estou dizendo para pegar a tag img, só que isso me retorna uma Nodelist ou seja um array de tags img, mesmo que no Html tenha apenas 1, aí preciso do [0] pra "dizer" que quero a primeira tag da Nodelist, lembrando que na maioria da linguagens de programção um índice de um array começa no 0.
    – LeAndrade
    Commented 21/08/2019 às 23:44
  • E se n for muito incomodo, como eu poderia fazer esse msm código com o getElementById ? Obrigado !
    – Pedro
    Commented 21/08/2019 às 23:45
  • Já o this refere-se ao elemento em si, ou seja, neste caso como estou fazendo isto document.getElementsByTagName('img') o this .src é o mesmo que document.getElementsByTagName('img')[0].src
    – LeAndrade
    Commented 21/08/2019 às 23:47
  • 1
    Muita Obrigado pela ajuda, já clareou d+ a minha cabeça !!!
    – Pedro
    Commented 22/08/2019 às 0:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .