• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

getElementsByTagName

Status
Für weitere Antworten geschlossen.
B

Bernhard

Neues Mitglied
Hallo @ alle,

ich hab mal wieder ein JavaScript-Problem:

ich habe eine Definitionsliste <dl>, die in einem div mit der id galerie liegt:

Code: 
<div id="galerie">
<dl>
<dt><img src="bild.jpg" alt"" /></dt><dd><p>text</p>
<h2>text</h2>
<p>text</p></dd>
<dt><img src="bild.jpg" alt"" /></dt><dd><p>text</p>
<h2>text</h2>
<p>text</p></dd>
</dl>
<a href="#">
<a href="#">
</div>
Jetzt versuche ich, <h2> mittels JavaScript einen anderen Style zu geben,
schaffe es aber nicht. Einer meiner bisherigen Versuche:

Code: 
var i = 0;
function initGalerie()
{

(...)

galerie = document.getElementById("galerie");
for(i=0; ueberschrift = galerie.getElementsByTagName("h2")[i]; i++) {
ueberschrift[i].style.color = "#f00";
}
}
was ist da falsch?

Grüße
Bernhard
 
Werbung:
Bernhard schrieb:
was ist da falsch?
Zum Vergrößern anklicken....
Hi Bernhard,
ich kenne mich da auch nicht so aus.
Darum kann ich nicht sagen was an deinem Code richtig ist.

So würde es gehen:
Code: 
var i = 0;
function initGalerie()
{
ueberschrift = galerie.getElementsByTagName("h2");
for(i; i < galerie.getElementsByTagName("h2").length; i++) {
  ueberschrift[i].style.color = "#f00";
}
}
galerie.getElementsByTagName("h2")[0]; sollte nun die erste <h2> in #galerie sein.

Ich würde i aber nicht außerhalb der function definieren sondern i erst in der function anlegen:
Code: 
function initGalerie()
{
[COLOR="DarkRed"][B]var i = 0;[/B][/COLOR]
ueberschrift = galerie.getElementsByTagName("h2");
for(i; i < galerie.getElementsByTagName("h2").length; i++) {
  ueberschrift[i].style.color = "#f00";
}
}

Oder so:
Code: 
function initGalerie()
{
ueberschrift = galerie.getElementsByTagName("h2");
for([COLOR="#8b0000"][B]i=0[/B][/COLOR]; i < galerie.getElementsByTagName("h2").length; i++) {
  ueberschrift[i].style.color = "#f00";
}
}
 
Zuletzt bearbeitet:
Noch ein wenig aufräumen:
Code: 
function initGalerie() {
    var ueberschriften = galerie.getElementsByTagName("h2");
    for(var i = 0, ueberschrift; ueberschrift = ueberschriften[i]; i++) {
        ueberschrift.style.color = "#f00";
    }
}
 
Werbung:
Hallo Neuroleptika,

neuroleptika schrieb:
Hi Bernhard,
ich kenne mich da auch nicht so aus.
Zum Vergrößern anklicken....

Ich hasse das, dass ich mich da nicht auskenne!

neuroleptika schrieb:
Darum kann ich nicht sagen was an deinem Code richtig ist.
Zum Vergrößern anklicken....

Danke für Deine Hilfe!

Mein Code funktioniert auch!
Ich hatte hier gestern abend "style.color" geschrieben, um mir etwas Tipperei
zu sparen. In der Original-Datei ist es aber "style.margin-top"...

Und das funktioniert offenbar wegen dem "-" nicht. Jetzt habe ich es mit "margin"
gemacht und die restlichen drei Werte auf "0" gesetzt, das funktioniert, gefällt
mir aber nicht.
Gibt es irgendeine Möglichkeit, das trotzdem mit "margin-top" zu machen?

Grüße
Bernhard
 
crash schrieb:
Noch ein wenig aufräumen:
Code: 
function initGalerie() {
    var ueberschriften = galerie.getElementsByTagName("h2");
    for(var i = 0, ueberschrift; ueberschrift = ueberschriften[i]; i++) {
        ueberschrift.style.color = "#f00";
    }
}
Zum Vergrößern anklicken....

Hallo Crash,

danke!

Aber noch eine Frage: woher weiß das Script, was "galerie" ist?
Brauche ich nicht vorweg die Zeile "galerie = document.getElementById("galerie");"?

Grüße
Bernhard
 
Code: 
var galerie = document.getElementById("galerie");

margin-top wird zu marginTop, border-color zu borderColor usw.
 
Werbung:
var immer benutzen, sonst wird die Variable (Variablen sind in JavaScript Eigenschaften des aktuellen Kontextes) als globale abgelegt. So ist sie nur innerhalb der Funktion sichtbar.
 
crash schrieb:
var immer benutzen, sonst wird die Variable (Variablen sind in JavaScript Eigenschaften des aktuellen Kontextes) als globale abgelegt. So ist sie nur innerhalb der Funktion sichtbar.
Zum Vergrößern anklicken....

Hallo Crash,

kannst Du mir den Unterschied zwischen einer Globalen und einer Variablen genauer erklären?

Meines nächstes Problem:

ich habe am Anfang meines Scripts:
Code: 
var i = 0;
var n = 1;
var m = 1;
function initGalerie()
{

(...)

    var galerie = document.getElementById("galerie");
    for(i=0; ueberschrift = galerie.getElementsByTagName("h2")[i]; i++) {
        ueberschrift.style.marginTop = "2em";
    }
    for(i=1; definitionTerm = galerie.getElementsByTagName("dt")[i]; i++) {
        definitionTerm.style.display = "none";
    }
    for(i=1; definitionData = galerie.getElementsByTagName("dd")[i]; i++) {
        definitionData.style.display = "none";
    }
}
Beim Laden der Seite sollte der erste <dt> mit der dazugehörigen ersten <dd>
sichtbar sein (funktioniert), beim Funktionsaufruf sollte der entsprechende <dt>
und <dd> eingeblendet werden. Das funktioniert auch, aber die vorhergehenden
werden nicht ausgeblendet:

Code: 
function bild(n)
{
    n = bildNummer(n);
    document.getElementById('bild-auf').href = "javascript:bild("+bildNummer(n-1)+");";
    document.getElementById('bild-ab').href = "javascript:bild("+bildNummer(n+1)+");";
    var galerie = document.getElementById("galerie");
    var definitionTermAnzeigen = galerie.getElementsByTagName("dt")[n];
        definitionTermAnzeigen.style.display = "block";
    var definitionDataAnzeigen = galerie.getElementsByTagName("dd")[n];
        definitionDataAnzeigen.style.display = "block";
}
Sollte ich beim Funktionsaufruf ebenfalls nochmal alle <dt> und <dd> ausblenden,
so wie ich es ganz am Anfang mache? (nicht getestet, müsste aber funktionieren)

Code: 
function bild(n)
{
    n = bildNummer(n);
    document.getElementById('bild-auf').href = "javascript:bild("+bildNummer(n-1)+");";
    document.getElementById('bild-ab').href = "javascript:bild("+bildNummer(n+1)+");";
    var galerie = document.getElementById("galerie");
    for(i=0; ueberschrift = galerie.getElementsByTagName("h2")[i]; i++) {
        ueberschrift.style.marginTop = "2em";
    }
    for(i=0; definitionTerm = galerie.getElementsByTagName("dt")[i]; i++) {
        definitionTerm.style.display = "none";
    }
    for(i=0; definitionData = galerie.getElementsByTagName("dd")[i]; i++) {
        definitionData.style.display = "none";
    }
    var definitionTermAnzeigen = galerie.getElementsByTagName("dt")[n];
        definitionTermAnzeigen.style.display = "block";
    var definitionDataAnzeigen = galerie.getElementsByTagName("dd")[n];
        definitionDataAnzeigen.style.display = "block";
}
Oder gibt es da eine elegantere Möglichkeit?

Grüße
Bernhard
 
Werbung:
Ich fange erstmal mit globalen Variablen an.

i, n, m, initGalerie werden global abgesetzt. Global ist alles, was an window hängt. Man sollte alle globalen Variablen vermeiden, da dies als Anti-Pattern gilt. i, n, m solltest du daher immer nur weiterreichen, die globale Funktion hingegen ist ok.
 
crash schrieb:
Ich fange erstmal mit globalen Variablen an.

i, n, m, initGalerie werden global abgesetzt. Global ist alles, was an window hängt. Man sollte alle globalen Variablen vermeiden, da dies als Anti-Pattern gilt. i, n, m solltest du daher immer nur weiterreichen, die globale Funktion hingegen ist ok.
Zum Vergrößern anklicken....

Hallo Crash,

wie mache ich das mit dem Weiterreichen?
Außerdem habe ich noch eine Variable im HTML stehen, da ich diese mit PHP generiere.
Gibt es da auch eine sauberere Lösung?

Grüße
Bernhard
 
Du kannst i statt global zu definieren immer vor den Schleifen erzeugen, dann wir die Variable nur erzeugt, wenn sie gebraucht wird und wenn sie nicht mehr gebraucht wird, von der Garbage Collection gelöscht.

Du könntest deine Galerie ja erst bei onload initialisieren und in der Funktion die du bei onload definierst n und m deklarieren und dann einfach weiterverwenden.
 
Werbung:
crash schrieb:
Du kannst i statt global zu definieren immer vor den Schleifen erzeugen, dann wir die Variable nur erzeugt, wenn sie gebraucht wird und wenn sie nicht mehr gebraucht wird, von der Garbage Collection gelöscht.

Du könntest deine Galerie ja erst bei onload initialisieren und in der Funktion die du bei onload definierst n und m deklarieren und dann einfach weiterverwenden.
Zum Vergrößern anklicken....

Hallo Crash,

ich versteh immer nur die Hälfte, das liegt nicht an Dir, sondern daran, dass mir die
Grundlagen fehlen...;-(

Ich initialisiere die Galerie mit
Code: 
window.onload = initGalerie;
Die Variable, die ich mit PHP generiere, muss aber im HTML-Dokument stehen bleiben?

Jetzt habe ich aber schon wieder ein neues Problem:

der IE6 folgt zwar brav dem .style.display = "none"; und blendet <dt> und <dd>
genauso brav mit .style.display = "block"; ein, aber er hält trotzdem den entsprechenden
Platz frei, d.h. ich habe einen enormen Scrollbalken, wo ich keinen brauche.

Gebe ich <dt> und <dd> zum Testen im Stylesheet display:none;, blendet er es
nicht ein, wenn ich ihm mit JavaScript sage, dass er es tun soll...

Da habe ich gar keine Idee, woran das liegen könnte, bzw. wie ich das fixen könnte...

(wie ich <dt> und <dd> beim Funktionsaufruf am sinnvollsten ausblende, weiß
ich auch immer noch nicht...)

Grüße
Bernhard
 
Hallo Crash,

hab's jetzt mal hochgeladen, damit ist es vielleicht einfacher, die Probleme zu lösen:
http://www.virtual.bplaced.net/de/glaeser/

Das IE-Problem habe ich eingekreist: lösche ich alle Listenelemente bis auf das
erste aus der Navigation, dann tritt es nicht mehr auf - könnte also auch ein
CSS-Problem sein...

Das nächste Problem: per default beginnt die Zählung der Elemente mit "Null",
daher gibt es da Durcheinander...

Wäre froh, wenn Du oder jemand anders da nochmal drüber schauen könntest...

Danke und Grüße
Bernhard

P.S.: sorry für den Doppel-Post, aber anders habe ich wohl keine Chance, dass
das noch gelesen wird...
 
Werbung:
neuroleptika schrieb:
Hi Bernhard,
du nennst jede dt id="bilder" und alle dd id="bildergalerie".
Eine id darf nur einmal im Dokument vorkommen.
Zum Vergrößern anklicken....

Hallo Neuroleptika,

das ist peinlich, da ich das natürlich weiß! Ich hätte ja auch selbst mal auf die
Idee kommen können, den Validator drüber laufen zu lassen...

Ist ausgebessert, da ich die beiden ids ohnehin nicht brauche...

Und jetzt wird's skuril: ich habe hier zwei Rechner mit IE6 zum Testen und die
Datei, die ich hochgeladen habe, ist eine abgespeckte Version des Originals.
Auf dem einen Rechner tritt der Fehler nach wie vor in beiden Versionen auf,
auf dem anderen nur noch in der Original-Version...

Bei dem anderen Problem komme ich aber auch nicht weiter... - da vermute ich,
dass ich es irgendwie schaffen muss, dass "i" nicht bei "Null" beginnt...

Grüße
Bernhard
 
Vielleicht hakelt es im IE6 weil display: none erst bei onload gesetzt wird.
Das könntest du schon vorher in einer css-Datei festlegen:
HTML: 
  <script type="text/javascript">
  /* <![CDATA[ */
document.write("<link rel='stylesheet' type='text/css' href='style/js.css'>"); 
  /* ]]> */
  </script>

Das hier verstehe ich nicht:
Code: 
for(i=0; thumbLink = thumbList.getElementsByTagName("a")[i]; i++) {
thumbLink.href = "javascript:bild("+(i[COLOR="DarkRed"][B]+1[/B][/COLOR])+");"
thumbLink.target = "_self"
 }

Damit erzeugst du sowas:
Code: 
<li class="vorschaubild-2"><a class="thumbnail" href="[COLOR="DarkRed"][B]javascript:bild(2)[/B][/COLOR];" target="_self"><img width="93" height="93" title="" alt="" src="http://www.html.de/../thumbs-glass/bild-2.gif"/></a></li>
Ich meine du bräuchtest sowas:
Code: 
<li class="vorschaubild-2"><a class="thumbnail" href="[COLOR="#8b0000"][B]javascript:bild(1)[/B][/COLOR];" target="_self"><img width="93" height="93" title="" alt="" src="http://www.html.de/../thumbs-glass/bild-2.gif"/></a></li>
 
Hallo Neuroleptika,

mittlerweile hab ich wegen dem IE6 da dran so viel rumgewerkelt und so viele
Varianten gespeichert, dass ich dabei bin, den Überblick zu verlieren...;-|

neuroleptika schrieb:
Vielleicht hakelt es im IE6 weil display: none erst bei onload gesetzt wird.
Das könntest du schon vorher in einer css-Datei festlegen:
HTML: 
  <script type="text/javascript">
  /* <![CDATA[ */
document.write("<link rel='stylesheet' type='text/css' href='style/js.css'>"); 
  /* ]]> */
  </script>
Zum Vergrößern anklicken....

wäre das eine saubere Lösung?
Mir wär's immer noch lieber, ich würde den Fehler finden: ich habe eben mal
testweise das allgemeine Stylesheet "style.css" entfernt, dann fehlen natürlich
etliche Formatierungen, aber der Fehler tritt nicht mehr auf...

neuroleptika schrieb:
Das hier verstehe ich nicht:
Code: 
for(i=0; thumbLink = thumbList.getElementsByTagName("a")[i]; i++) {
thumbLink.href = "javascript:bild("+(i[COLOR=DarkRed][B]+1[/B][/COLOR])+");"
thumbLink.target = "_self"
 }
Damit erzeugst du sowas:
Code: 
<li class="vorschaubild-2"><a class="thumbnail" href="[COLOR=DarkRed][B]javascript:bild(2)[/B][/COLOR];" target="_self"><img width="93" height="93" title="" alt="" src="http://www.html.de/../thumbs-glass/bild-2.gif"/></a></li>
Ich meine du bräuchtest sowas:
Code: 
<li class="vorschaubild-2"><a class="thumbnail" href="[COLOR=#8b0000][B]javascript:bild(1)[/B][/COLOR];" target="_self"><img width="93" height="93" title="" alt="" src="http://www.html.de/../thumbs-glass/bild-2.gif"/></a></li>
Zum Vergrößern anklicken....

Ja, irgendwie in die Richtung müsste es gehen - hab's mal geändert, jetzt kommt
"Bild 2", wenn man auf "Thumb 2" klickt, wenn man aber auf "Thumb 1" klickt, versucht
er ein "Bild 0" zu laden, das es aber natürlich nicht gibt, wenn man direkt die großen
Bilder wechseln möchte, passiert das gleiche, außerdem stimmt die Anzeige in der
Statusleiste nicht mehr mit der Nummer des Bildes überein (das wäre zu verschmerzen,
weil da natürlich mal echte Bilder rein sollen, ohne Zahl)...

Grüße
Bernhard

Edit: Fehler eingekreist! Wenn ich in "style.css" #language (das ist der Footer) entferne,
oder auch nur das position:absolute; dann hat der IE6 kein Problem mehr...

Edit: Fehler im IE6 behoben! http://www.virtual.bplaced.net/de/glaeser/
Die Lösung:
Code: 
.clear {
	display:inline;
}
 
Zuletzt bearbeitet:
Werbung:
Erst wird die Höhe von body, html und #wrapper berechnet und daraus die position für #language-start.
Erst bei onload blendest du die Listenelemente aus. Der IE6 scheint die neue Position für #language-start nicht noch einmal zu berechnen.

Auch in anderen Browsern kommt es vor, dass die Listenelemente kurz aufblitzen ehe display: none wirkt.
Wenn du die Elemente von vornherein ausblendest dürfte das nicht passieren.

Edit:
Zu spät?
 
neuroleptika schrieb:
Erst wird die Höhe von body, html und #wrapper berechnet und daraus die position für #language-start.
Erst bei onload blendest du die Listenelemente aus. Der IE6 scheint die neue Position für #language-start nicht noch einmal zu berechnen.

Auch in anderen Browsern kommt es vor, dass die Listenelemente kurz aufblitzen ehe display: none wirkt.
Wenn du die Elemente von vornherein ausblendest dürfte das nicht passieren.

Edit:
Zu spät?
Zum Vergrößern anklicken....

Hallo Neuroleptika,

ich habe keine Ahnung, warum es funktioniert, aber es funktioniert:

Code: 
.clear {
    display:inline;
}
Das kurze Aufblitzen könnte irritierend sein, zumal natürlich später die Bilder größer
und vermutlich auch mehr werden, andererseits sind sie so auf einfache Art und
Weise vorgeladen, ohne, dass ich dafür auch noch Script brauche (das ich ja dann
auch noch mittels PHP generieren müsste).

Allerdings könnte ich den von Dir vorgeschlagenen Code immer noch einsetzen,
abgeändert auf visibility, damit würde immer noch vorgeladen, aber das Aufblitzen
wäre vermieden...

Jetzt bleibt mein JavaScript-Problem...;-(

Grüße
Bernhard

Edit: hier das Stylesheet für den IE6: http://www.virtual.bplaced.net/includes/galerie-ie6.css
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben