Bilder in table ändern

Jochen · 30. Dezember 2017

In einem Programm zeige ich in einem table Bider an. Ich veränder sie temporär und möchte dann wieder die alten Bilder herstellen.

Das Zurücksetzen klappt nicht, es werden immer die geänderten Bilder gezeigt.

Auszug aus dem Programm

INITIALISIERE BILDER

var images = {};

images.img1 = new Image();

images.img2 = new Image();

images.img3 = new Image();

images.img1.src = "Terrorist1.jpg";

images.img2.src = "Terrorist2.jpg";

images.img3.src = "Terrorist3.jpg";

WEISE SIE ZU

function ZeigNeueBilder()

{ for (var i = 0; i <= anzahlBilder-1; i++) {

document.getElementById('bl' +zw[i]).appendChild(images['img' + (i+1)]);

} }

VERÄNDERE MIT

document.getElementById('bl' +zw[0]).childNodes[0].src = "Mueder Feind1.jpg";

Wenn ich dann die Funktion ZeigNeueBilder wieder audrufe, verändert sich nichts.

Das Bild "muder Feind" bleibt.

Dank vorab

Jochen

basti1012 · 30. Dezember 2017

hast du da etwas mehr code zum zeigen??

Jochen · 31. Dezember 2017

Ich könnte das gesamte Programm schicken, aber da wirst du bei meinen Programmierkünsten nicht durchblicken.

Ich habe hier das dargestellt was ich mit den Bildern mache,

Die Funktion ZeigNeueBilfder bringt wie gewünscht die Bilder.

Mit der Anweisung

document.getElementById('bl' +zw[0]).childNodes[0].src = "Mueder Feind1.jpg";

bekomme ich die Bilder geändert.

Wenn ich jetzt die geänderten Bilder mit der Funktion ZeigNeueBilder zurücksetzen will , dann passiert nichts. Das Bild (Beispiel)" MuederFeind" bleibt und wird nicht durch 'img' + (i+1)' ersetzt.

Wahrscheinlich muss ich mit remove oder replace arbeiten. Aber das bekomme ich nicht hin. ,

basti1012 · 31. Dezember 2017

ich würde versuchen das du das bild erst mit remove löscht und dann das bild holst. wie sieht den der code aus der hinter "ZeigeNeueBilder" ist.

ich muss mal gerade selber kucken wie man das mit remove macht ,das weiss ich jetzt auch nicht aus den kopf. fals wer anders schneller ist als ich dann bitte posten. ansonsten suche ich mal was raus wie ich es mit remove machen würde

Sempervivum · 31. Dezember 2017

Ich würde einfach eine weitere Funktion nehmen, die den alten Zustand wieder herstellt:

Code

function zurueck() {
    for (var i = 0; i <= anzahlBilder-1; i++) {
        document.querySelector('bl' +zw[i] + ' img').src = images['img' + (i+1)].src;
    }
}

Oder noch besser, die img-Tags gleich im HTML anlegen und nur das src-Attribut ändern.

Jochen · 31. Dezember 2017

Klappt leider nicht. Es kommt die Fehlermeldung:

TypeError: document.querySelector(...) is null

Zur Info

'bl' +zw[i] ist die lufende Numer einer Zelle in dem table

Sempervivum · 31. Dezember 2017

Ups, da ist mir ein Fehler unterlaufen. So müsste es besser sein:

Code

function zurueck() {
    for (var i = 0; i <= anzahlBilder-1; i++) {
        document.querySelector('#bl' +zw[i] + ' img').src = images['img' + (i+1)].src;
    }
}

Jochen · 31. Dezember 2017

Funktioniert nicht.

Ich meine der Ausdruck #bl' +zw[i] + ' img').src

kann nicht gefunden werden Das Event wird ausgelöst durch

<tr>

,,,,

function hitColor(blink){

if (document.getElementById(bl).id==('bl' + zw[0]) )

{

document.getElementById('bl' +zw[0]).childNodes[0].src = "Mueder Feind1.jpg";

ZaehlTreffer(0)

}

if (document.getElementById(bl).id==('bl' + zw[1]) )

{

...

....

Und

EIN SCHÖNES 2018 wünsche ich dir. Hast mir oft geholfen in 2017.

DANKE

Sempervivum · 31. Dezember 2017

Jetzt weiß ich leider nicht, was sich hinter diesem zw verbirgt.

Ich habe jedoch mal einen Test gemacht, und dies funktioniert:

Code

<table>
        <tr>
            <td id="bl0" onclick="hitColor('bl0')"></td>
            <td id="bl1" onclick="hitColor('bl1')"></td>
            <td id="bl2" onclick="hitColor('bl2')"></td>
        </tr>
     </table>
     <button onclick="ZeigNeueBilder();">Rücksetzen</button>
     <script>
        var images = {};
        images.img1 = new Image();
        images.img2 = new Image();
        images.img3 = new Image();


        images.img1.src = "images/dia0.jpg";
        images.img2.src = "images/dia1.jpg";
        images.img3.src = "images/dia2.jpg";

        anzahlBilder = 3;
        function ZeigNeueBilder() {
            for (var i = 0; i <= anzahlBilder - 1; i++) {
                var cell = document.getElementById('bl' + i);
                var chld = cell.childNodes[0];
                var im = images['img' + (i + 1)];
                if (chld) {
                    chld.src = cell.getAttribute("data-src");
                } else {
                    cell.setAttribute("data-src", im.src)
                    cell.appendChild(im);
                }
            }
        }
        ZeigNeueBilder();
        
        function hitColor(blink) {
            document.getElementById(blink).childNodes[0].src = "images/01.png";
        }

        </script>

Alles anzeigen

Versuch mal, ob Du es auf deine Umgebung übertragen kannst.

Jochen · 2. Januar 2018

Funktio9niert beio mir nicht. habe ein bis auf diese Funktionen gekürztes Programm beigefügt.

Bei "eins" kommen die Bilder in SW

Bei "zwei" in rot.

Wenn ich eins und dann zwei und dann wieder eins drücke bleiben die roten Bilder

<!DOCTYPE html>

<html>

<head>

<h1>Konzentration und Schnelligkeit Übung 1</h1>

<title>Gehirn Aufgabe5</title>

<style>

#button1 {

background-color: #00AFFF;

border: 5 solid blue;

color: white;

padding: 2px 2px;

text-align: center;

font-size: 18px;

}

table{

margin-top:30px;

border: 0px solid white;

clear:left;

}

//td{font-size:40px; padding:4px 10px;

}

td {width: 75px;

height: 75px;

border:0px solid red;

}

</style>

var images = {};

images.img1 = new Image();

images.img2 = new Image();

images.img3 = new Image();

images.img4 = new Image();

images.img5 = new Image();

images.img11 = new Image();

images.img12 = new Image();

images.img13 = new Image();

images.img14 = new Image();

images.img15 = new Image();

images.img1.src = "Terrorist1.jpg";

images.img2.src = "Terrorist2.jpg";

images.img3.src = "Terrorist3.jpg";

images.img4.src = "Freund1.jpg";

images.img5.src = "freund2.jpg";

images.img11.src = "ToterTerrorist1.jpg";

images.img12.src = "ToterTerrorist2.jpg";

images.img13.src = "ToterTerrorist3.jpg";

images.img14.src = "ToterFreund1.jpg";

images.img15.src = "ToterFreund2.jpg";

function Zwei()

{

for (var i = 0; i <= 4; i++)

{

document.querySelector('#bl' +[i] + ' img').src = images['img' + (i+11)].src;

}

function Eins()

{

for (var i = 0; i <= 4; i++)

{

document.getElementById('bl' +[i]).appendChild(images['img' + (i+1)]);

}

</script>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Jochen · 2. Januar 2018

Übrigens in zw ( deine Frage) sind die Indizes der Zelle die angezeigt werden sollen.

Sempervivum · 2. Januar 2018

Wenn Du die img-Elemente erst beim Klick anlegst, müsstest Du immer überprüfen, ob sie schon existieren, wie ich es in Posting #9 gemacht habe. Es vereinfacht die Sache jedoch sehr, wenn man die Bilder sofort anlegt und beim Klick nur noch das src-Attribut austauscht. Dies funktioniert bei mir:

Code

<table>
        <tr>
            <td id="bl0" onclick="hitColor('bl0')"></td>
            <td id="bl1" onclick="hitColor('bl1')"></td>
            <td id="bl2" onclick="hitColor('bl2')"></td>
        </tr>
    </table>
    <input type="button" id="button1" value="eins" onclick="Eins()">Eins
    <input type="button" id="button2" value="zwei" onclick="Zwei()">Zwei
    <style>
        table td img {
            width: 300px;
            height: 200px;
        }
    </style>
        <script>
        var images = {};
        images.img1 = new Image();
        images.img2 = new Image();
        images.img3 = new Image();
        images.img11 = new Image();
        images.img12 = new Image();
        images.img13 = new Image();

        images.img1.src = "images/dia0.jpg";
        images.img2.src = "images/dia1.jpg";
        images.img3.src = "images/dia2.jpg";
        images.img11.src = "images/01.png";
        images.img12.src = "images/02.png";
        images.img13.src = "images/03.png";
        anzahlBilder = 3;
        for (var i = 0; i < anzahlBilder; i++) {
            var im = document.createElement("img");
            document.getElementById('bl' + i).appendChild(im);
        }
        function Zwei() {
            for (var i = 0; i < anzahlBilder; i++) {
                document.querySelector('#bl' + i + ' img').src = images['img' + (i + 11)].src;
            }
        }
        function Eins() {
            for (var i = 0; i < anzahlBilder; i++) {
                document.querySelector('#bl' + i + ' img').src = images['img' + (i + 1)].src;
            }
        }

Alles anzeigen

Jochen · 5. Januar 2018

Wenn ich die Bilder wie in #12 anzeige, wie kann ich sie wieder löschen.

Mit innerHTML oder remove??

Sempervivum · 5. Januar 2018

Sollte gehen, indem Du dem src-Attribut einen leeren String zuweist.

Sempervivum · 5. Januar 2018

PS: Geht nicht wirklich gut, weil dabei ein Symbol für ein ungültiges Bild angezeigt wird. Besser display auf none oder visibility auf hidden setzen:

Code

        function loeschen() {
            for (var i = 0; i < anzahlBilder; i++) {
                document.querySelector('#bl' + i + ' img').style.display = "none";
            }
        }

Bilder in table ändern

Jetzt mitmachen!

Teilen

Tags