Fehler bei Erzeugung variabler Variablen

[Enrico]

Hallo,

ich stehe jetzt vor dem Problem, dass ich mehrere grafische Buttons abfragen muss, deren Anzahl variiert.

Ich dachte, ich könnte dies wie folgt über variable Variablen bewerkstelligen:

  
var i = 0,  
    Ermittelt = false,  
    Darstellung;  
  
do  
{  
   window["B" + i] = document.getElementById("B" + i);  
  
   if (!Ermittelt)  
   {  
      Darstellung = window["B" + i].previousElementSibling.className.replace(/[^\d]/g, "");  
  
      Ermittelt = true;  
   }  
  
   i++;  
}  
while (document.getElementById("B" + i) === null);  

Hier erhalte ich hingegen die Fehlermeldung window[("B" + i)].previousElementSibling is null

Wenn ich mir den Quelltext meiner Testseite ansehe, dann habe ich Elemente mit der id "B0" und "B1", der JavaScript-Code wird erst ausgeführt, wenn die Seite vollständig geladen wurde.

Was habe ich hier falsch gemacht?

Danke und Gruß,
Enrico

[molily]

Hallo,

do
{
   window["B" + i] = document.getElementById("B" + i);

Wieso speicherst du hier das Element in einer globalen Variablen? Warum nicht einfach in einer lokalen Variablen?

var element = document.getElementById(…);

Wenn du das Element ohnehin nur in der Schleife nutzt, musst du keine dutzenden globalen Variablen erzeugen.

Außerdem erzeugen manche Browser aus historischen Gründen für jedes Element mit einer ID eine gleichnamige window-Eigenschaft, genau wie dein obiger Code. Es könnte also zu Konflikten kommen.

Darstellung = window["B" + i].previousElementSibling.className.replace(/[^\d]/g, "");

Hier erhalte ich hingegen die Fehlermeldung window[("B" + i)].previousElementSibling is null

Vermutung: Es gibt kein Geschwisterelement vor dem angesprochenen Element. Entweder das HTML ist fehlerhaft oder previousElementSibling ist nicht geeignet, um zu dem gesuchten Element zu kommen. Wie sieht das betreffende HTML aus?

Grüße,
Mathias

[Enrico]

Hallo Mathias,

danke für Deine schnelle Antwort :-)

Wieso speicherst du hier das Element in einer globalen Variablen?

Das muss (?) ich deshalb machen, weil ich später noch event-Handler zuweise.

Vermutung: Es gibt kein Geschwisterelement vor dem angesprochenen Element
Entweder das HTML ist fehlerhaft oder previousElementSibling ist nicht geeignet, um zu dem
gesuchten Element zu kommen. Wie sieht das betreffende HTML aus?

Erzeugung über php:

  
<div class="ButtonLinksOut1" id="ButtonLinks' . $i . '"></div>  
   <div class="ButtonMitteOut1">  
      <div id="B' . $i . '" class="Button nowrap">' . $Kommentare . "</div>  
   </div>  
<div class="ButtonRechtsOut1" id="ButtonRechts' . $i . '"></div>  

Ausgabe im Browser:

  
<div class="ButtonLinksOut1" id="ButtonLinks0"></div>  
   <div class="ButtonMitteOut1">  
      <div id="B0" class="Button nowrap">' . $Kommentare . "</div>  
   </div>  
<div class="ButtonRechtsOut1" id="ButtonRechts0"></div>  

Ich stelle die Buttons deswegen in der eben beschriebenen Struktur dar, da die Grafiken teilweise auch weitere grafische Elemente, wie Teile eines Rahmens enthalten, und ich möchte, dass sich die Aktionen auf den unmittelbaren Buttontext beziehen und nicht auf die komplette Grafik.

Gruß,
Enrico

[molily]

Hallo,

Wieso speicherst du hier das Element in einer globalen Variablen?

Das muss (?) ich deshalb machen, weil ich später noch event-Handler zuweise.

Dann holst du dir das Element halt nochmal anhand seiner ID. Wenn dir die Nummer vorliegt, dann kannst du wieder getElementById verwenden. Eine gleichnamige globale Variable anzulegen verschafft dir keinen Vorteil beim Ansprechen, oder?

<div class="ButtonLinksOut1" id="ButtonLinks0"></div>
   <div class="ButtonMitteOut1">
      <div id="B0" class="Button nowrap">' . $Kommentare . "</div>
   </div>
<div class="ButtonRechtsOut1" id="ButtonRechts0"></div>

Wie vermutet hat das Element, das du ansprichst, keine Geschwisterelemente. Also ist previousElementSibling nicht der richtige weg.

Zu welchem Element willst du kommen?

Mathias

[Enrico]

Hallo Mathias,

sorry, ich war bis eben unterwegs.

<div class="ButtonLinksOut1" id="ButtonLinks0"></div>
   <div class="ButtonMitteOut1">
      <div id="B0" class="Button nowrap">' . $Kommentare . "</div>
   </div>
<div class="ButtonRechtsOut1" id="ButtonRechts0"></div>

Ich will zum Element <div id="ButtonLinks0"></div> bzw. beim nächsten Button an <div id="ButtonLinks0"></div> usw.

Gruß,
Enrico

[JürgenB]

Hallo Enrico,

  

> while (document.getElementById("B" + i) === null);  

bist du sicher, dass die Schleife weiter laufen soll, wenn getElementById null liefert?

Gruß, Jürgen

[Enrico]

Hallo Jürgen,

auch bei Dir möchte ich mich für meine verspätete Rückmeldung entschuldigen.

Stimmt, falsche Bedingung.

Richtig muss es natürlich lauten "while (document.getElementById("B" + i) !== null);

Fehlermeldung ist nach wie vor unverändert, was aber vermutlich dann daran liegt, dass ich das falsche Element ansprechen möchte.

Gruß,
Enrico

[Enrico]

So, jetzt habe ich es.

Es lag an der falschen Objektermittlung ("parentNode" ist hier richtig) sowie an der falschen Fortführungsbedingung der while-Schleife ("!==" ist richtig).

Danke für eure Hilfe! :-)

Gruß,
Enrico