In welcher Reihenfolge werden DOMContentLoaded abgearbeitet?

[Felix Riesterer]

Liebe Linuchs,

in Deinem Code lese ich Unsinn.

// alle Audios auf halbe Lautstaerke
for ( let i=0; i<document.querySelectorAll( "audio" ).length; i++ ) document.querySelectorAll( "audio" )[i].volume = 0.2;

Warum bildest Du zwei unterschiedliche Ergebnismengen, anstatt mit nur einer zu arbeiten? Unterschiedlich soll heißen, dass die Arrays nicht ein und das selbe Objekt sind, auch wenn ihre Inhalte (vielleicht!) identisch sind. Also schreibe das in Zukunft so:

document.querySelectorAll("audio").forEach(function (audio) {
  audio.volume = 0.2;
});

Mit Pfeilfunktionen schreibt sich das noch besser:

document.querySelectorAll("audio").forEach(audio => audio.volume = 0.2);

Vom Server geholt, wird jetzt (bei mir) die Tonart (C ist Standard) nicht gesetzt, das Ergebnis sieht so aus:

Keine Ahnung, was da genau nicht tut. Aber das verwendete DOM ist in meinen Augen nicht sinnvoll gewählt. Du willst Akkordsymbole anzeigen, die je nach Tonart dynamischen Inhalt bekommen. Dazu verwendest Du ein solches Markup:

<div class=text style="font-size:180%;line-height:160%">
 <!-- (To)nika (Do)minante (Su)bdominante (Su7)-->
 <p class="akkorde"><l>1</l>
  Wa-(To)rum bist du gekommen, wenn (Do)du schon wieder gehst? <br>
  Du hast mein Herz genommen und (To)wirfst es wieder weg!<br>
  |: Ich (Su)bin kein Bajazzo, bin (To)auch ein Mensch wie du <br>
  und (Do)leise schlägt mein Herz dir (To)zu. :|</p>

Der Validator ist jedenfalls überhaupt nicht zufrieden. Das solltest Du unbedingt in Ordnung bringen, bevor Du weiter nach Fehlfunktionen suchst!

Meiner Ansicht nach sollte das Markup eher so sein:

<ul class="lyrics">
  <li>
    <div>
      Wa-<span class="to"></span>rum bist du gekommen, wenn
      <span class="do"></span>du schon wieder gehst?
    </div>
    <div>
      Du hast mein Herz genommen und
      <span class="to"></span>wirfst es wieder weg!
    </div>
    ...
  </li>
</ul>

Die Klasse lyrics beschreibt, dass es sich um einen Liedtext handelt. Die Liste beschreibt die Strophen und ihre Reihenfolge. In CSS kann man also .lyrics li als Selektor für eine Strophe verwenden.

Die jeweilige Liedzeile soll als Block-Element dargestellt werden, weil Du an ihrem Ende einen Zeilenumbruch notierst. Das kannst Du auch mit einem passenden Kindelement von li erreichen. Meine Wahl mit einem div ist vielleicht nicht die beste, aber es ist ein block-level element, das man hier verwenden könnte.

Die eigentlichen Akkordsymbole werden in den leeren span-Elementen geregelt. Ihr Inhalt soll ja mit JavaScript beschrieben werden, deshalb habe ich sie inhaltsleer notiert. Über ihre Klasse kann man dann den Inhalt hineinschreiben. Der passende Selektor wäre .lyrics .to für Tonika-Akkorde - der Rest eben analog.

Mit sinnvollerem Markup sollte auch das Hineinschreiben der Akkorde besser gelingen. Wenn es dann noch immer scheitert, obwohl das Markup vom Validator gesegnet wird und die JavaScript-Konsole keine Fehler wirft, dann kann man fragen, ob vielleicht DOMContentLoaded daran Schuld haben könnte, zu dem @Robert B. korrekt anmerkt, dass man das an das document-Objekt binden muss.

Liebe Grüße

Felix Riesterer