Text bei Klick auf ein Bild ändern in HTML & Javascript?

Hi, ich möchte hier eine Tabelle über SDGs für ein Projekt in eine Website einfügen. Wenn man dann auf ein SDG Bild drückt, soll sich der Text darunter in eine Info darüber (das jeweilige SDG) ändern. Ich bekomm das leider nicht allein hin, falls mir da wer weiter helfen kann,

Danke im Vorraus!

Answer 1

[regex9]

Ich würde die Beschreibungstexte initial via CSS verstecken. Bei Klick auf das jeweilige Bild wird der dazugehörige Text eingeblendet.

HTML:

<figure>
  <img alt="..." class="sdg-image" src="...">
  <figcaption class="sdg-description sdg-description--hidden">Text</figcaption>
</figure>

JavaScript:

const sdgImages = document.querySelectorAll(".sdg-image");

for (const sdgImage of sdgImages) {
  sdgImage.addEventListener("click", evt => {
    const box = evt.currentTarget.parentElement;
    const descriptionBox = box.querySelector(".sdg-description");

    if (descriptionBox) {
      descriptionBox.classList.remove("sdg-description--hidden");
    }
 });
}

CSS:

.sdg-description--hidden {
  display: none;
}