How to check whether an image has been clicked or not

Asked

Viewed 207 times

1

I did an exercise using pure javascript, the exercise asked you to click on an image of a lamp "erased" and, soon after it was clicked on this image, the attribute "src" of it changed and received another image, which would be the same image of the lamp "lit". I managed to accomplish, however it works only once, after I click it does not change again.

My question is, how can I verify when an element (in this case an image) was clicked using pure javascript only ? My idea would be to take how many times the image was clicked and change the "src" of hers in a loop.

here’s the ex I did but it works only once:

HTML code: 

<!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>

Javascript code: 

     function acendeLampada() {
     let lampada = document.getElementById('imagem').src = 
 'lampada_Acesa.jpg'
   }

 function apagaLampada() {
     let lampada = document.getElementById('imagem2').src = 
 'lampada_Apagada.jpg'

}

javascript html5

2 answers

3


In javascript, it creates a variable where you will store the current lamp state. This way you can then better control whether the lamp is lit or not. For example:

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;
    }
}

In HTML, you delete one of the IMG tags, keep this one:

<img src="lampada_Apagada.jpg" id="imagem" onclick="acendeLampada()">
  • 1

    Thank you very much !

0

Only one of the many ways that can be done basically changes the image according to the counter’s condition:

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">

  • Come on, I didn’t understand the part of [0] and neither the part of this.src , because they are necessary ? Thanks from now on !

  • Certo Giovanni, the [0] when I do this document.getElementsByTagName I’m saying take the tag img, only that it returns me a Nodelist or is an array of img tags, even if in Html there is only 1, then I need the [0] to "say" I want Nodelist’s first tag, recalling that in most programming languages an index of an array starts in the 0.

  • And if n is too much trouble, how could I make this msm code with getElementById ? Thank you !

  • Already the this refers to the element itself, i.e., in this case how I am doing this document.getElementsByTagName('img') the this .src is the same as Document.getelementsbytagname('img')[0]. src

  • I will edit the answer with an id.

  • 1

    Thanks a lot for the help, already cleared d+ my head !!!

  • Legal man, to see more deeply the doubts you had can read here: https://developer.mozilla.org/en-US/docs/Web/API/document/getElementsByTagName and here: https://developer.mozilla.org/en-US/docs/API/document/getElementsByTagName

Show 2 more comments

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.