document.getElementById

[Lena]

Hi!

Ich habe eine kleines Problem, bei dem Ihr mir sicherlich helfen könnt.

Im HTML steht:
<img id="bildreferenz1" src="#" width="140" height="97" alt="" border="0" />
<img id="bildreferenz2" src="#" width="140" height="97" alt="" border="0" />
[...]

Im JS:
 for(var index = 0; index < displayList.length; index++) {
  var domNode = document.getElementById(displayList[index]['name']);

if(domNode != null) {

if(displayList[index]['display'] == true) {    document.getElementById('bild'+displayList[index]['name']).style.display = "";
   } else {    document.getElementById('bild'+displayList[index]['name']).style.display = "none";
   }
  }
 }

^ Wie kann ist diesen Bildern zur Laufzeit den Style "display:none" zuweisen?  document.getElementById('bild'+displayList[index]['name']) = "has no properties!"

Zur Info: document.getElementById(displayList[index]['name']); gibt als Wert "referenz"+x, z.B. referenz1, ... zurück.

Danke schon mal Lena

[ChrisB]

Hi,

Im JS:

Und wann?

Du kannst auf Elemente natuerlich erst reagieren, nachdem sie vorhanden sind.
Ueblicherweise ruft man JS-Funktionen, die auf Elemente zugreifen sollen, per onload auf.

Zur Info: document.getElementById(displayList[index]['name']); gibt als Wert "referenz"+x, z.B. referenz1, ... zurück.

Hast du das auch ueberprueft, oder nimmst du es lediglich an?

MfG ChrisB

[Steel]

Hi!

Sehe ich das richtig?

Du hast ein Bild mit der ID 'bildreferenz1' und ein Bild mit der ID 'bildreferenz2'.

Du moechtest beiden Bildern display:none zuweisen.

Du hast einen Code der den Elementen mit den IDs 'referenz1' und 'referenz2' display:none verpasst.

Ja. Oeh. Und wo versuchst Du nun den Bildern display:none zu geben? ;)

[Case]

Du greifst einmal mit:
document.getElementById(displayList[index]['name'])
und einmal mit:
document.getElementById('bild'+displayList[index]['name'])
darauf zu das ist bestimmt nicht gewollt oder?

Hier mal ein code bei dem ein bild versteckt wird und eines nicht, hoffe es hilft:

<img id="bildreferenz1" src="#" width="140" height="97" alt="22" border="0" />
<img id="bildreferenz2" src="#" width="140" height="97" alt="23" border="0" />

<script type="text/javascript">
displayList = new Array();

displayList[0] = new Array();
displayList[0]['name']= "referenz1";
displayList[0]["display"]= 1;

displayList[1] = new Array();
displayList[1]["name"]= "referenz2";
displayList[1]["display"]= 0;

for(var index = 0; index < displayList.length; index++) {
 var domNode = document.getElementById('bild'+displayList[index]['name']);

if(domNode != null) {

if(displayList[index]['display'] == true) {
   document.getElementById('bild'+displayList[index]['name']).style.display = "";
  } else {
   document.getElementById('bild'+displayList[index]['name']).style.display = "none";
  }
 }
}
</script>

[Struppi]

displayList[0] = new Array();
displayList[0]['name']= "referenz1";
displayList[0]["display"]= 1;

Das ist kein Array!

displayList[1] = new Array();
displayList[1]["name"]= "referenz2";
displayList[1]["display"]= 0;

Das ebenfalls nicht, was du hier verwendest ist ein Objekt.
Lies dir mal diesen Artikel durch: http://aktuell.de.selfhtml.org/artikel/javascript/organisation

Struppi.

[Case]

displayList[0] = new Array();
displayList[0]['name']= "referenz1";
displayList[0]["display"]= 1;

Das ist kein Array!

displayList[1] = new Array();
displayList[1]["name"]= "referenz2";
displayList[1]["display"]= 0;

Das ebenfalls nicht, was du hier verwendest ist ein Objekt.
Lies dir mal diesen Artikel durch: http://aktuell.de.selfhtml.org/artikel/javascript/organisation

Struppi.

Ein kleiner Forentroll?

Erstens ist der Code nur da um das Skript lauffähig zu machen. Deshalb ist es unnötig hier darüber zu diskutieren, weil es nichts mit dem Problem zu tun hat.

Zweitens hab ich nicht gesagt, dass es ein Array ist. Ich hab nur Javascript angewendet.

Drittens hab ich deinen netten Link gelesen und was find ich da?

"Ein JavaScript-Objekt ist erst einmal nichts anderes als ein Container für weitere Daten. Ein Objekt ist eine Liste, in dem unter bestimmten Namen gewisse Unterobjekte (auch Member genannt) gespeichert sind. Aus anderen Programmiersprachen ist eine solche Datenstruktur als Hash oder assoziativer Array bekannt."

Ja genau oh Wunder, es ist doch ein Array. Besser gesagt ein "assoziativer Array".

Hör auf klugzuscheissen und sag was sinnvolles.

[Struppi]

Struppi.

Bitte zitiere nur das worauf du antworten möchtest, Danke.

Ein kleiner Forentroll?

Uch, vielleicht auch das.

Zweitens hab ich nicht gesagt, dass es ein Array ist. Ich hab nur Javascript angewendet.

Hast du nicht?

displayList[0] = new Array();

Drittens hab ich deinen netten Link gelesen und was find ich da?

"Ein JavaScript-Objekt ist erst einmal nichts anderes als ein Container für weitere Daten. Ein Objekt ist eine Liste, in dem unter bestimmten Namen gewisse Unterobjekte (auch Member genannt) gespeichert sind. Aus anderen Programmiersprachen ist eine solche Datenstruktur als Hash oder assoziativer Array bekannt."

Ja genau oh Wunder, es ist doch ein Array. Besser gesagt ein "assoziativer Array".

Oh Wunder was lesen wir da "aus anderen Programmiersprachen", in selfhtml lesen wir was http://de.selfhtml.org/javascript/objekte/array.htm#assoziative_arrays@title=anderes, aber ehrlich gesagt beruht dieser Eintrag auf meinem Vorschlag und es gab längere Diskussionen zum Thema, ob man das Array nennen darf oder nicht.

Es spielt aber letztlich in dem Fall keine Rolle, es geht einzige und allein um die Verwendung eines Array anstelle eines Objectes. In JS sind dies zwei grundverschiedene Dinge. Das wird auch nicht durch meine Klugscheißerei anders, das ist so.

Du kannst natürlich weiterhin ein Array Objekt verwenden, wenn du ein Object brauchst, das sei dir überlassen. Du kannst auch ein Number, Date, Function oder RegExp Objekt verwenden, jedes Objekt was du mit new erzeugen kannst. Am einfachsten ist es aber wenn du einfach ein Object() nimmst. Oder noch einfacher mit einem literal.

Dein Beispiel wäre also besser wenn du es so geschrieben hättest:

var displayList = new Array();  
  
displayList[0] = {};  
displayList[0]['name']= "referenz1";  
displayList[0]["display"]= 1;  

Dann weiß jeder was du möchtest.

Struppi.

[molily]

Ja genau oh Wunder, es ist doch ein Array. Besser gesagt ein "assoziativer Array".

Da steht lediglich, dass alle Objekte in JavaScript das Verhalten zeigen, was in anderen Programmiersprachen »assoziativer Array« heißt. Wie Struppi sagt ist das aber kein Streit um eine Benennung, meinetwegen nenne Objekte so.

Diese Benennung ist allerdings im Bereich von JavaScript äußerst irreführend, denn Arrays in JavaScript über die Konstruktorfunktion »Array« sind etwas besonderes. Sie sind natürlich auch Objekte und die Array-Elemente sind ganz normale Eigenschaften des Objektes.

Das heißt, ich kann folgendes schreiben:

var myA = new Array();
myA[0] = "bla"
myA["1"] = "blub";
myA["Hallo Welt"] = "Hello World";
myA.bla = "sülz";

Ich habe dem Array als OBJEKT vier Eigenschaften (Member) angehängt.
Ich habe dem Array als ARRAY jedoch nur zwei Elemente hinzugefügt. Als Array-Elemente werden nur die numerischen 0 und 1 gezählt.

Wenn ich jetzt die <http://de.selfhtml.org/javascript/objekte/array.htm@title=Array-spezifischen vordefinierten Eigenschaften und Methoden> benutzen will, so geben diese auch nur diese beiden Elemente wieder:

alert(myA.length); // 2

Wenn ich jetzt NUR die Funktionalität eines »assoziativen Arrays« will und Name-Wert-Paare speichern will, so bringt mir die Benutzung des Array-Konstruktors überhaupt nichts:

displayList[1] = new Array();
displayList[1]["name"]= "referenz2";
displayList[1]["display"]= 0;

Hier bleibt die length immer auf 0, der Array ist leer - aber als Objekt hat er natürlich zwei Eigenschaften!

Array ist ein also spezifisches Objekt und hat alle Eigenschaften eines allgemeines Objektes. Der Konstruktor für allgemeine Objekte, von dem alle anderen JavaScript-Objekte abstammen, lautet »Object«. D.h. eine Array-Instanz ist immer auch eine Object-Instanz (Ist-ein-Beziehung).

Wie Struppi sagt, gibt es sehr viele spezifische Objekttypen, die von Object erben und sich daher als »assoziativer Array« gebrauchen ließen (selbst RegExp, Date, Function, Boolean usw.). Dabei werden ihnen aber bloß neue Eigenschaften angehängt, die spezifische Funktionalität bleibt ungenutzt und hat damit ggf. nichts zu tun.

Es ist daher unlogisch und irreführend, wenn man ein spezifisches Objekt nimmt, insbesondere Array. Das suggeriert, dass man den Array auch als Array nutzen kann - was aber nicht der Fall ist.

Zusammengefasst:

Object - Speichern von beliebigen ungeordneten Name-Wert-Paaren (Objekt-Eigenschaften). Durchlaufen über eine for-in-Schleife. Es gibt keine Sortierung und keine Möglichkeit, die Anzahl der Eigenschaften abzufragen (außer man durchläuft sie mit for-in und zählt mit).

var o = new Object();
o.name1 = "wert1";
o.name2 = "wert2";

oder in der Literalschreibweise:

var o = { name1 : "wert1", name2 : "wert2" };

Array - Speichern von geordneten Indexzahl-Wert-Paaren. Durchlaufen über normale for-Schleife (for-in ginge auch, aber nicht der Reihe nach). Es gibt Sortierung usw. und die Möglichkeit, die Anzahl der Elemente abzufragen.

var a = new Array();
a[0] = "wert1";
a[1] = "wert2";

oder

a.push("wert1");
a.push("wert2");

oder in der Literalschreibweise:

var a = ["wert1", "wert2"]

Mathias

[Case]

Danke

Wenn ich jetzt NUR die Funktionalität eines »assoziativen Arrays« will und Name-Wert-Paare speichern will, so bringt mir die Benutzung des Array-Konstruktors überhaupt nichts:

displayList[1] = new Array();
displayList[1]["name"]= "referenz2";
displayList[1]["display"]= 0;

Hier bleibt die length immer auf 0, der Array ist leer - aber als Objekt hat er natürlich zwei Eigenschaften!

Ein Array zu erzeugen, wenn ich nur ein Objekt will, um Eigenschaften anzuhängen, ist wirklich ziemlich dämlich.

[Struppi]

Ein Array zu erzeugen, wenn ich nur ein Objekt will, um Eigenschaften anzuhängen, ist wirklich ziemlich dämlich.

Sag ich doch.

Struppi.

[Steel]

Hej!

Ich wunschte ich koennte so erklaeren wie Du. Dann koennte ich vielleicht meine eigenen Gedanken verstehen.

[molily]

displayList[0] = new Array();
displayList[0]['name']= "referenz1";
displayList[0]["display"]= 1;

http://de.selfhtml.org/javascript/objekte/array.htm#assoziative_arrays

Man könnte hier auch ein Objekt-Literal notieren:

displayList.push({
   name : "referenz1",
   display : 1
});

Mathias