Html Code Text

[Der Martin]

Hallo Marc,

sorry das mit den Attributwerten habe ich übersehen.

macht nix, Kleinigkeit. :-)

Ok und das mit den Array´s hab ich auch geschnallt ... Alles was in "", steht wird fortlaufen weitergezählt beginnend bei 0.

Ja, wenn es Strings (Zeichenketten) sind. Vielleicht hast du mal eine andere Anwendung, wo du nicht Strings, sondern mehrere Zahlenwerte in einem Array speichern willst. Lottozahlen zum Beispiel. Die werden dann natürlich ohne Anführungszeichen geschrieben.

var Artikelueberschrift = ["Exklusiver Liebes",
                            "Pärchen Schlüsselanhänger",
                            "Geschenk für Sie und Ihn und Paare",
                            "Text Text];

Stimmt, hier ----------------------------^
hast du ein Anführungszeichen vergessen. Hast du ja selbst schon gemerkt.

Und wenn du jetzt noch Lust hast, weiter einzusteigen, können wir die Version mit Platzhaltern ausprobieren. Aber mach das lieber mit einem neuen Dokument, dann kannst du jederzeit auf die aktuelle Version zurückgehen, die vielleicht weniger elegant ist, aber funktioniert.

Ändere zunächst mal diese Passagen ...

<script type="text/javascript">
           document.write(Artikelueberschrift[0])
   </script><br>

... alle so ab:

<span class="platzhalter"></span><br>

Ohne Script, ohne Text, und alle gleich. Das hört sich im ersten Moment dämlich an, bekommt aber gleich einen Sinn. Nun ergänze im Kopfbereich, direkt nach der Array-Definition etwas Javascript-Code. Die Nummern in den Kommentaren kannst du weglassen, ich gehe nur im nächsten Abschnitt auf diese Stellen ein und möchte die Zuordnung klarmachen.

window.onload = function()                                          // (1)  
 { var ersetzen = document.getElementsByClassName("platzhalter");   // (2)  
  
   for (var i=0; i<ersetzen.length; i++)                            // (3)  
      if (i<Textbaustein.length)                                    // (4)  
       { ersetzen[i].innerHTML = Textbaustein[i];                   // (5)  
       }  
 }

So, zur Erläuterung:

(1) Du hast in deinem ersten Ansatz schon Funktionen definiert und solltest diese Zeile daher zum Teil verstehen. Im Unterschied zu deiner ersten Fassung gebe ich der Funktion keinen Namen. Den brauche ich nicht, weil ich die Funktion direkt an window.onload binde. Dadurch wird sie ganz von selbst ausgeführt, sobald das Dokument fertig geladen ist.

(2) Mit getElementsByClassName() bekomme ich eine Liste (quasi ein Array) aller Elemente im Dokument, die einer bestimmten Klasse angehören. Das sind die oben erwähnten span-Elemente mit class="platzhalter".

(3) Die for-Schleife kennst du vermutlich schon. Ich lasse hier die Variable i von 0 beginnend zählen, bis sie die Länge der eben ermittelten Element-Liste erreicht hat, und mit jedem Wert von i wird die Schleife einmal durchlaufen.

(4) Ich prüfe, ob zum momentanen Wert von i überhaupt noch ein Eintrag im Textbaustein-Array existiert. Wenn dort zu wenig Einträge sind, bleiben eventuell ein paar Platzhalterelemente im Dokument leer. Den umgekehrten Fall prüfe ich nicht ab; wenn das Textbaustein-Array überzählige Einträge enthält, werden die einfach nicht beachtet.

(5) Mit dem Index i adressiere ich das aktuelle Element aus der Platzhalter-Liste und setze dessen Eigenschaft innerHTML auf den zugehörigen Wert aus dem Textbaustein-Array. Das ist quasi ein automatisiertes Copy&Paste. ;-)

Und nun kannst du zum krönenden Schluss das gesamte Script in eine externe Javascript-Ressource auslagern und hast damit eine saubere, klare Trennung.

Die Methode getElementsByClassName() wird übrigens von allen gängigen Browsern schon seit langer Zeit unterstützt - außer IE bis Version 8. Wenn du IE8 und älter mit berücksichtigen willst, brauchst du dafür einen entsprechenden Workaround.

So long,
 Martin