Bestehende Bilder ersetzen

  • Ich gebe Bilder aus bei dem Anklicken eines Buttons. Jetzt möchte ich beim Klicken eines zweiten Buttons diese Bilder durch andere ersetzen.
    Bei meinem Test - Programm werden die alten Bilder nicht ersetzt, die neuen werden angefügt.


    Wie kann ich sie ersetzen?


    <!DOCTYPE html>
    <html>
    <script>



    var imgArray = [];
    var vorgabe=5;
    var zw=[1,1,1];


    for (i = 0; i < 20; i++) {
    imgArray[i] = new Image();
    imgArray[i].src = 'ImageVerkehr/verk' + (i+1) + '.jpg';
    }
    function showArray1() {
    var zw=[1,19,18,17,15];
    var gallerie = document.getElementById("ersteReihe");
    for (i = 0; i < vorgabe; i++) {
    gallerie.appendChild(imgArray[zw[i]]);
    }
    }
    function showArray2() {
    var zw=[1,2,3,4,5];
    var gallerie = document.getElementById("ersteReihe");
    for (i = 0; i < vorgabe; i++) {
    gallerie.appendChild(imgArray[zw[i]]);
    }
    }
    </script>
    <body>


    <button onclick='showArray1()' id="btnnr1" >Category 1</button>
    <button onclick='showArray2()' id="btnnr2" >Category 2</button>
    <div id='ersteReihe'></div>
    </body>
    </html>

  • Bei Verwendung von appendChild() wird das Element hinzu gefügt. Ich denke, das einfachste wird sein, wenn Du den Container vor dem neuen Füllen leerst:


    function showArray2() {
    var zw=[1,2,3,4,5];
    var gallerie = document.getElementById("ersteReihe");

    gallerie.innerHTML ="";
    for (i = 0; i < vorgabe; i++) {
    gallerie.appendChild(imgArray[zw[i]]);
    }
    }




    Wenn der Container noch weitere Elemente enthält, würde ich die Bilder in einen zusätzlichen Container legen, der nur diese enthält.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!