Hallo Linuchs, meine 0,02 € wären dies: Lass das src Attribut ganz weg. Mit der CSS-Regel ~~~css img:not([src]) { display:none; } ~~~ verschwinden die Griffbilder dann automatisch aus der Anzeige. Statt src="ukulele_griff_(0).png" würde ich ~~~html <img data-griff="0" alt=""> ~~~ Ja, alt="", weil das Bild im uninitialisierten Zustand keine alternative Darstellung besitzt. Und ich würde mal annehmen, dass das Template für den Dateinamen immer das Gleiche ist, deswegen habe ich nicht ukulele_griff_(0).png hingeschriebem Sicherlich gibt's außer Griff (0) auch noch andere, und du sorgst beim Transponieren dafür, dass in Tonart C aus 0 ein C wird, aus 1 ein D etc, und in Tonart G wird aus 0 ein G, aus 1 ein A, und so weiter. Du hast also sicherlich eine Tabelle, die pro Tonart die Griffnummern in Akkorde übersetzt. So was wie ~~~js const akkorde = { "C": [ "C", "D", "E", ... ], "G": [ "G", "A", "H", ... ], }; ~~~ oder wie auch immer das konkret bei Dir aussieht. Beim Setzen der Akkorde holst Du Dir einfach Tonart und machst Du dann pro Bild dies (ich nehme an, da muss dann irgendwie passend der Griff (0) in den richtigen Akkord übersetzt werden) – bei 12 verschiedenen Akkorden gibt's dann entweder 12 replace-Aufrufe... ~~~js const akkordNr = parseInt(bild.dataset.griff), akkordName = akkorde[tonart][akkordNr]; bild.src = "ukulele_griff_" + akkordName + ".png"; bild.alt = AkkordName; ~~~ _Rolf_ -- sumpsi - posui - obstruxi

Hallo Linuchs, meine 0,02 € wären dies: Lass das src Attribut ganz weg. Mit der CSS-Regel ~~~css img:not([src]) { display:none; } ~~~ verschwinden die Griffbilder dann automatisch aus der Anzeige. Statt src="ukulele_griff_(0).png" würde ich ~~~html <img data-griff="ukulele_griff_(0).png" alt=""> ~~~ Ja, alt="", weil das Bild im uninitialisierten Zustand keine alternative Darstellung besitzt. Beim Setzen der Tonart machst Du dann pro Bild dies (ich nehme an, da muss dann irgendwie passend der Griff (0) in den richtigen Akkord übersetzt werden) – bei 12 verschiedenen Akkorden gibt's dann entweder 12 replace-Aufrufe... ~~~js bild.src = bild.dataset.griff.replace("(0)", tonart); bild.alt = tonart; ~~~ ... oder Du suchst Dir mit /(\d+)/ die Nummer raus und holst den passenden Akkord dafür aus einer Übersetzungstabelle. ~~~js const akkorde = { '0': 'C', '1': 'D', '2', 'E', ... }; bild.src = bild.dataset.griff.replace(/\((\d+)\)/, (x, n) => akkorde[n]); ~~~ `/\((\d+)\)/` ist ein regulärer Ausdruck. Ich ziehe ihn mal etwas auseinander (funktioniert im Code nicht, weil die Spaces dann stören): ~~~ \( ( \d + ) \) ~~~ \( matcht die linke Klammer, \) die rechte Klammer. \d matcht Ziffern, das + sagt: 1-n Ziffern. Die Klammern um \d+ bewirken das Bilden einer Matchgruppe für die Ziffernfolge, auf die man im folgenden Callback zugreifen kann. Dieser Callback, den replace als zweiten Parameter bekommt, erhält als ersten Parameter den vollständigen Match (x wäre bei griff_(0) also "(0)"), der zweite Parameter ist die erste geklammerte Matchgruppe, deshalb findet man in `n` den String `"0"` vor und damit bekommt man aus dem akkorde-Objekt das 'C'. _Rolf_ -- sumpsi - posui - obstruxi