Change image in javascript after click

Question

How to change an image using Javascript?

I made this code here but it didn’t work.

html file

  <a href="passo1.html" target="janela">
     <img id="passo1" class="passo" src="img/passo_color1.png" style="float:left">
  </a>

js file

            teste = document.querySelector("#passo1").addEventListener('click', function(){
teste.src = "img/passo_color.jpg";});

Answer 1

To begin with, here’s a functional example of what you want: Jsfiddle

Note that to reference the element itself you must use 'this':

document.querySelector("#passo1").addEventListener('click', function(){
    this.src = "img/passo_color.jpg";
});

Also you have two events 'on click'. By leaving the href="passo1.html" on your tag <a> you are saying that by clicking this element the user should be redirected to the link in question (by leaving target="window" at least it will open another window and not redirect the window itself to another link).

In my example I left without, but if it is this effect you want, change the image and open a new window then so be it.