Texte variant en fonction de l'image aléatoire affichée

Bonjour à tous.
J'ai utilisé cette source : [SRC] Image aléatoire au chargement de la page.

Je suis novice en ce qui concerne la programmation HTML et j'apprécierais d'avoir un peu d'aide (mes connaissances se limitent aux bases du html et du javascript).
J'ai utilisé la première méthode citée qui fonctionne d'ailleurs très bien.
Cependant je n'arrive pas à afficher un texte du style "Cette image représente ceci". Ainsi je voudrais par exemple que lorsque l'image aléatoire sortie est celle avec un arbre, il y ai écrit à la suite "Cette image représente un arbre".

Pourriez-vous m'aider ?

Cordialement.

pour faire cela, vous devrez partir d'un tableau comme le suivant par exemple avec la 2e méthode de sélection

Code:

---

1 2 3 4 5 6 7 8 9 10 11

let elements = [ { "nom_image" : "arbre.png", "libelle" : "ceci n'est pas un arbre", }, { "nom_image" : "brocoli.png", "libelle" : "Le prochaine repas ?", },   ];

---

bonjour,

Code:

---

1 2 3 4

<figure id="randomImg"> <img src="" alt="" style="max-width:200px;" /> <figcaption></figcaption> <figure>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

"use strict"; function randomImg( figure_id ) { let random_images = [ { "url" : "https://www.museumtv.art/wp-content/uploads/2017/08/ceci-nest-pas-une-pipe1-e1502441198132.jpg", "txt" : "Ceci n'est pas une pipe", }, { "url" : "https://www.museumtv.art/wp-content/uploads/2017/08/ceci-nest-pas-une-pipe-parodie-magritte-02.jpg", "txt" : "Sel ou poivre ?", }, // .... ]; let random_index = Math.floor(Math.random() * random_images.length); document.querySelector( figure_id + ' img' ).src = random_images[random_index].url; document.querySelector( figure_id + ' img' ).alt = random_images[random_index].txt; document.querySelector( figure_id + ' figcaption' ).textContent = random_images[random_index].txt; } window.addEventListener("DOMContentLoaded", (event) => { randomImg('#randomImg'); });

---