Kleines JavaScript - Hilfe gesucht

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
Post Reply
frase
Posts: 3038
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 7:58 am

Ich benötige ein kleines JavaScript das alle Bildtypen auf einer Seite von PNG auf SVG ändert.
Es soll nur Bilder ausgetauscht werden, die sich in einem DIV mit einer bestimmten Klasse befinden.
Kein jQuery, sondern reines JS!

Beispiel IST-Zustand:

Code: Select all

...
<div class="imgDiv">
    <img src="img1.png" alt="img1"><div>
</div>
...
<div class="imgDiv">
    <img src="img2.png" alt="img2"><div>
</div>
...
<div class="imgDiv">
    <img src="img3.png" alt="img3"><div>
</div>
...
SOLL werden:

Code: Select all

...
<div class="imgDiv">
    <img src="img1.svg" alt="img1"><div>
</div>
...
<div class="imgDiv">
    <img src="img2.svg" alt="img2"><div>
</div>
...
<div class="imgDiv">
    <img src="img3.svg" alt="img3"><div>
</div>
...
Also: Alles bleibt wie es ist, nur der Bildtyp soll von PNG auf SVG geändert werden.

Mit jQuery ginge das wohl relativ einfach - aber wie geht das mit reinem JS?

Holger
Site Admin
Posts: 3159
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by Holger » Thu Dec 19, 2019 2:22 pm

Da fällt mir aus dem Kopf ein Einzeiler ein:

Code: Select all

document.getElementsByClassName("myclass").getElementsByTagName("img").src = img.src.replace("xxx", "yyy");
:mrgreen:

frase
Posts: 3038
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 3:13 pm

Holger wrote:
Thu Dec 19, 2019 2:22 pm
Da fällt mir aus dem Kopf ein Einzeiler ein:
Leider klappt das nicht.
Die beiden getElements hintereinander bringen den Browser aus dem Konzept.
Die Konsole meckert das an.
Wahrscheinlich muss man eine Schleife bauen oder so was.

frase
Posts: 3038
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 7:27 pm

Ha, ich kann die Aufgabenstellung vereinfachen:
Suche auf einer Seite alle Bilder mit Namen "bild.png".
Benenne alle diese Bilder um in "bild.svg".
Das dürfte nicht schwierig sein - oder?
Mein Versuch ...

Code: Select all

var images = document.images;
for (var i=0, iLen=images.length; i<iLen; i++){
    if (images[i].src == './xxx/yyy/bild.png') {
        images[i].src = './xxx/yyy/bild.svg';
    }
}
... funktioniert leider nicht sauber.
Mit einem Gleichheitszeichen bei der Bedingung werden ein paar Bilder zu viel umbenannt.
Mit zwei oder drei, kommt keine src an.
Das muss doch irgendwie gehen :?:

Holger
Site Admin
Posts: 3159
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by Holger » Thu Dec 19, 2019 7:32 pm

frase wrote:
Thu Dec 19, 2019 3:13 pm
Leider klappt das nicht.
Das war jetzt auch nicht wirklich ganz so ernst gemeint (Stichwort: you don't need jQuery):
myself wrote: :mrgreen:
(Obwohl, das würde schon funktionieren, wenn es sich nur um ein Div mit eindeutiger Id drehen würde.)

Hier dann eine Lösung, die auch wirklich funktionieren sollte:

Code: Select all

<script>
var myDiv = document.getElementsByClassName("imgDiv");
    for (var i = 0; i < myDiv.length; i++) {
        var image = myDiv[i].getElementsByTagName('img')[0];
        image.src = image.src.replace(".png", ".svg");
        //console.log(image);
    }
</script>
Besser du packst das noch in eine Funktion, damit es keine Namenskollisionen mit anderen globalen Variablen geben kann.

Edit: der Code war noch für die "nicht vereinfachte" Variante gedacht

frase
Posts: 3038
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Kleines JavaScript - Hilfe gesucht

Post by frase » Thu Dec 19, 2019 8:38 pm

Holger wrote:
Thu Dec 19, 2019 7:32 pm
Hier dann eine Lösung, die auch wirklich funktionieren sollte:
Un das dud se :P
Super!
Danke!

Post Reply