Adding onclick event to img id

Question

I want to make an

img

where the

onclick

hides another

img

id and shows another one. This is the code I made:

document.getElementById("poluzoom").addEventListener("click", changeimg);



function changeimg() {

  document.getElementById("poluzoom").style.visibility = "visible";

  document.getElementById("readypol").style.visibility = "hidden";

  document.getElementById("textpolu").style.visibility = "hidden";

}

<div id="fabricas">

  <img id="poluzoom" src="fabrica/fabricas.gif" alt="Mundo Zoom">

  <img id="readypol" src="poluicao/offbuton.png" alt="but1">

</div>

If I use

mouseover

, the function works, but with

onclick

it doesn't. What am I doing wrong?

Answer 1

Another option is to use Jquery toggle() see example http://jsfiddle.net/M9QBb/434/

<div id="fabricas">
  <img id="poluzoom" src="http://lorempixel.com/400/200/" alt="Mundo Zoom">
  <img id="readypol" src="http://lorempixel.com/400/200/sports/" alt="but1" style="display: none">
</div>

JQuery

$("#fabricas").click(function() {
  $(this).find('img').toggle();
});

Adding onclick event to img id

Sign up