Skip to main content

Boa noite, eu fizFiz 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""src" dela mudasse e recebesse uma outra imagem, que seria a mesma imagem da lampada "acesa". Eu consegui realizar porem, porém ele funciona apenas uma vez, dpsdepois que eu clico ele não se altera novamente.

A minha duvidadúvida é, como eu posso verificar quando um elemento (no caso uma imagem) foi clicada usando apenas javascript puro ? aA minha ideia seria pegar quantas vezes a imagem foi clicada e ir alterando o "src""src" dela em um looploop.

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'

}

Boa noite, eu 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 porem ele funciona apenas uma vez, dps que eu clico ele não se altera novamente.

A minha duvida é, 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'

}

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'

}

Fonte Link
Pedro
  • 307
  • 1
  • 3
  • 15

Como verificar se uma imagem foi clicado ou nao

Boa noite, eu 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 porem ele funciona apenas uma vez, dps que eu clico ele não se altera novamente.

A minha duvida é, 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'

}