Andre FIlipe Andre FIlipe - 6 months ago 8
HTML Question

Adding onclick event to img id

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

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();
});
Comments