JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<h1>Die rote Riesenameise im Detail</h1>
<!-- Beispiel für bild:
    <img src="ordner/nichtGefunden.png" id="anzeige"><br>
-->
<input type="button" value="Leer" id="anzeige"><br>
<br>
Zeige:<br>
<!-- Beispiel für bild:
    <img src="ordner/ameise0.png" name="1" class="vorschau">
-->
<input type="button" value="Bild 1" name="1" class="vorschau">
<input type="button" value="Bild 2" name="2" class="vorschau">
<input type="button" value="Bild 3" name="3" class="vorschau">
<input type="button" value="Bild 4" name="4" class="vorschau">
<input type="button" value="Bild 5" name="5" class="vorschau">

CSS

.vorschau{
    width: 100px;
}

JavaScript

/* variablen hier außerhalb (global) definieren
 * das man auch außerhalb von onload
 * mit ihnen arbeiten kann
 */
var thumbs;
var box;

//wenn das Fenster geladen ist
window.onload=function(){
    // alle thumbnails initalisieren //variable ist schon gesetzt
    thumbs = document.getElementsByClassName("vorschau");
    // Die anzeige Box initalisieren
    box = document.getElementById("anzeige");

    //zeigeBild einmal laufen lassen 
    // und das erste bild mitgeben
    zeigeBild(thumbs[0],thumbs[0].name);

    // Für jedes thumbnail
    for (var i = 0; i < thumbs.length; i++){
        /* während der entwicklung
         * Alle elemente anzeigen für die das onnclick initalisiert wurde
         * wieder auskommentieren !!
         */
        console.log(thumbs[i]);
        // die nummer des thumbnails für spätere weiterverarbeitung mitgeben
        thumbs[i].setAttribute("data-i", i);

        // Einen Klick auf ein Thumbnail abfangen
        thumbs[i].onclick = function(){
            //An die Funkt. das Element und das i mitgeben
            zeigeBild(
                // Das element übergeben
                thumbs[this.getAttribute("data-i")],
                //den wert übergeben, der im feld name des Elements steht
                thumbs[this.getAttribute("data-i")].name
            );
        }
    };
};
function zeigeBild(element, nr){
    // der standart Name der Bilder
    var bildname = "ameise";
    // der Pfad zu den Bildern
    var pfad = "";

    // den Wert value, der anzeigebox verändern
    box.value = pfad+bildname+nr;
    //beispiel für ein img element:
    //box.src =  pfad+bildname+nr;
    /* während der entwicklung
     * Element anzeigen was verändert wird
     * wieder auskommentieren !!
     */
    console.log(box);
    
    // mit dem angeklickten element was machen
    //element...
    
}