Como mudar imagem na div com onclick?

Front-end HTML
#1

como mudar imagem na div com onclick? pode ser onclick ou outra coisa, mas preciso que as imagens mude de acordo com o clique

#2

Crie um contador, incremente a cada click para ter uma referencia, adicione o caminho das img que desejar em um Array.

cada indice ira corresponder a uma img ex:

 indice 0 = img/pacote/bomdia1.jpg
 indice 1 = img/pacote/bomdia2.jpg

Agora é so atualizar a imagem ex:

 document.getElementById("bomdia").src=array[indice];

Segue o código em funcionamaneto.

HTML:

<img id="bomdia" onclick="trocar()" alt="Bom dia!" class="img-bomdia" src="img/pacote/bomdia1.jpg">

JS:

var currentImgIndex=1;
var ImgSrcArray = [ //caminho das suas imgs aqui
'img/pacote/bomdia1.jpg',
'img/pacote/bomdia2.jpg',
'img/pacote/bomdia3.jpg',
'img/pacote/bomdia4.jpg'
];

function trocar(){

  if(currentImgIndex == ImgSrcArray.length) //reseta quando o contatador for igual ao tamanho da array e volta a 1° img
  {
    currentImgIndex=0;
  }
  document.getElementById("bomdia").src=ImgSrcArray[currentImgIndex]; //altera a img do elemento "bomdia" de acordo com o indice
    currentImgIndex++; // incrementa a nossa referencia

}
2 curtidas
#3

muuuuuito obrigaada!