<body>
  <h1>aquarium</h1>
  <img id="illustration" src="https://cdn.pixabay.com/photo/2018/04/06/15/17/pattern-3296033_1280.png" width="200px">
  <figcaption id="legende">
    Carpes... version 1
  </figcaption>
  <p><button type="button">
      suivant
    </button></p>
</body>
body {
  text-align: center;
  background-color: #EEF5F5;
}
#illustration {
  border: 3px solid black;
  border-radius: 50%;
}

let indice = 0;
let urlTab = [
  "https://cdn.pixabay.com/photo/2018/04/06/15/17/pattern-3296033_1280.png",
  "https://cdn.pixabay.com/photo/2015/04/20/18/54/koi-732007_1280.png",
  "https://cdn.pixabay.com/photo/2015/04/20/18/54/koi-732005_1280.png"
];

let bouton = document.querySelector("button");
bouton.addEventListener("click", suivant);

function suivant() {
  indice = indice + 1;
  //modification de l'image
  let image_carpe = document.querySelector("#illustration");
  image_carpe.src = urlTab[indice % 3];
  //modification de la légende
  let legende_carpe = document.querySelector("#legende");
  legende_carpe.textContent = "Carpes... version " + ((indice % 3) + 1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.