Variable in Objektreferenz einfügen

[Marco]

Hallo,

ich habe eine mehrere dynamisch erzeugte Auswahllisten und möchte diese mit javascript per document.formular... ansprechen. Wie kann ich in diesen Ausdruck eine Variable, in diesem Fall den Namen der jeweiligen Liste, einfügen?

habs mit document.formular.+variable+.options usw versucht, aber das klappt wie zu erwarten nicht. Bin ein absoluter JS Anfänger, bin deshalb dankbar für jede Hilfe!

Gruß
Marco

PS: Passt zwar nicht ganz zum Thema, aber was mache ich falsch, wenn ich var opt= new Option("Name") verwende und zwar die neue Option erzeugt wird, aber ohne den Inhalt "Name"? Danke

[Juan]

Moin,

ich habe eine mehrere dynamisch erzeugte Auswahllisten und möchte diese mit javascript per document.formular... ansprechen. Wie kann ich in diesen Ausdruck eine Variable, in diesem Fall den Namen der jeweiligen Liste, einfügen?

habs mit document.formular.+variable+.options usw versucht, aber das klappt wie zu erwarten nicht. Bin ein absoluter JS Anfänger, bin deshalb dankbar für jede Hilfe!

eine Möglichkeit wäre es über eval zu machen:
sel = eval("document.form."+variable);
und dann mit sel.options arbeiten.
Aber da eval=evil, ist das nicht zu empfehlen.
Was aber auch gehen müsste wäre:
sel = getElementByID(variable);
wenn du deinen Auswahllisten IDs zuweist.

Grüsse,
  Juan

[Juan]

Moin nochmal,

sel = getElementByID(variable);

sollte natürlich document.getElementById heissen.

Grüsse,
   Juan

[Struppi]

eine Möglichkeit wäre es über eval zu machen:
sel = eval("document.form."+variable);

Das wäre die schlechteste Möglichkeit.

und dann mit sel.options arbeiten.
Aber da eval=evil, ist das nicht zu empfehlen.
Was aber auch gehen müsste wäre:
sel = getElementByID(variable);
wenn du deinen Auswahllisten IDs zuweist.

Das wäre die zweitschlechteste
Die einfachste ist hier als Schema 4 beschrieben.

Struppi.

[Marco]

Danke erstmal für die Antworten!

@Juan
Warum ist denn eval nicht zu empfehlen? Aus Sicherheitsgründen oder warum?

@Struppi
Inwiefern hilft mir das, mein Problem zu lösen? Schließlich wird doch in Schema 4 nur beschrieben, wie ich anderweitig auf das Element mit einem bestimmten Namen zugreife, nicht wie ich irgendeine Stringvariable einbinde oder sehe ich das falsch?

Um das nochmal zu verdeutlichen: Ich möchte die Variable

var wert = "thema_wert_"+ (zahl);

so übergeben, dass sie später im select-Feld das Attribut name darstellt, nämlich so

var opt= new Option();  
  document.eintrag.thema_wert_1.options[document.eintrag.thema_wert_1.length] = opt;

...wobei die Indexnummer von "thema_wert" von der Variablen zahl abhängt.

Ich glaube, Juan liegt mit seinen Antworten auf der richtigen Spur, nur würde ich es gern vermeiden, jedem Element auch noch eine ID zu geben und lieber auf eval zurückgreifen. Aber wenn ihr sagt das ist nicht so toll dann...

[rfb]

Moin

Inwiefern hilft mir das, mein Problem zu lösen? Schließlich wird doch in Schema 4 nur beschrieben, wie ich anderweitig auf das Element mit einem bestimmten Namen zugreife, nicht wie ich irgendeine Stringvariable einbinde oder sehe ich das falsch?

ja, denn statt dem String kannst du auch eine Variable in die eckigen Klammern setzen. Und das wolltest du doch?

Gruß
rfb

[Marco]

ja, denn statt dem String kannst du auch eine Variable in die eckigen Klammern setzen. Und das wolltest du doch?

oh. richtig. vielen Danke!

[Marco]

Das dumme ist nur, dass jetzt der Aufruf nicht mehr klappen will (abgesehen von der Tatsache, dass in den option-Feldern kein Inhalt steht, wenn ich diesen in new Option() eintrage)

var opt= new Option("Test");  
  document.forms["eintrag"].elements[wert].options[document.forms["eintrag"].elements[wert].length] = opt;

[wahsaga]

hi,

Das dumme ist nur, dass jetzt der Aufruf nicht mehr klappen will

Das richtig dumm ist, dass du keine vernünftige Problembeschreibung lieferst.

Nein, "will nicht mehr klappen" ist absolut keine.

gruß,
wahsaga

[Marco]

In der Fehlerkonsole steht:

document.forms.eintrag.elements[wert] has no properties

sowie

doc has no properties

[Struppi]

In der Fehlerkonsole steht:

document.forms.eintrag.elements[wert] has no properties

Dann existiert eines dieser Objekte nicht oder mehrfach.

sowie

doc has no properties

dito.

Struppi.

[Marco]

Dann existiert eines dieser Objekte nicht oder mehrfach.

um was für ein Element handelt es sich denn bei "doc"? document? ansonsten habe ich keine anderen Elemente dieser Art.

Also damit wir mal eine "richtige" Problembeschreibung haben, hier der komplette Code:

  
<script language="JavaScript">  
 function addfield_2() {  
  var kasten = document.getElementById("verwthemen");  
  var botton_weitere = document.getElementById("botton_2");  
  
  var a = (kasten.childNodes.length)-3;  
  var b = kasten.childNodes[a].name;  
  var c = b.split("_");  
  var zahl = parseFloat(c[2])+1;  
  var wert = "thema_wert_"+ (zahl);  
  
  var newinput = document.createElement("input");  
  newinput.setAttribute("name","thema_name_"+ (zahl));  
  newinput.setAttribute("value","Text");  
  newinput.setAttribute("style","float: left;");  
  
  var newinput_2 = document.createElement("select");  
  newinput_2.setAttribute("name",wert);  
  
  var opt= new Option("Test");  
document.forms["eintrag"].elements[wert].options[document.forms["eintrag"].elements[wert].length] = opt;  
  
  var newbr = document.createElement("br");  
  
  kasten.appendChild(newinput);  
  kasten.insertBefore(newinput,botton_weitere);  
  kasten.appendChild(newinput_2);  
  kasten.insertBefore(newinput_2,botton_weitere);  
  kasten.appendChild(newbr);  
  kasten.insertBefore(newbr,botton_weitere);  
 }  
</script>  

Die Funktion wird von einem Button aus angesprochen und soll ein select Input, ein Select Element mit Optionen und ein Br erzeugen. Input, Select und br werden erzeugt (aber nur wenn ich den Teil ".options[document.forms["eintrag"].elements[wert].length]" weg lasse), aber nicht die options. Vielleicht hab ich auch was wichtiges vergessen!?

[Harlequin]

Yerf!

...

var newinput_2 = document.createElement("select");

Hier wird das Select gebaut (soweit ganz gut)

newinput_2.setAttribute("name",wert);

...

document.forms["eintrag"].elements[wert].options[document.forms["eintrag"].elements[wert].length] = opt;

Hier wird es im Formular gesucht und nicht gefunden...
...

kasten.appendChild(newinput);

...denn erst hier wird es an die richtige Stelle (hoffe ich mal) eingefügt.
...

</script>

>   
> Vielleicht hab ich auch was wichtiges vergessen!?  
  
Ja. Dass das Element erst dann in dem Formular gefunden werden kann, wenn es dort auch eingefügt wurde. Verschieb mal den append nach oben direkt hinter das Erzeugen, dann sollte es gehen.  
  
  
Gruß,  
  
Harlequin  

[Marco]

Verschieb mal den append nach oben direkt hinter das Erzeugen, dann sollte es gehen.

Danke Harlequin! Genau das war's. Ist eigentlich logisch, aber drauf zu kommen... Nochmal danke!

Gruß
Marco

[Struppi]

Verschieb mal den append nach oben direkt hinter das Erzeugen, dann sollte es gehen.

Danke Harlequin! Genau das war's. Ist eigentlich logisch, aber drauf zu kommen... Nochmal danke!

Auch im IE?

Der kann meines Wissens dynamisch erzeugte Formularelemente so nicht ansprechen, wobei dein Konstrukt aber völlig überflüssig ist, da du die Referenz ja bereits hast, es ist der Rückgabewert von createElement

Struppi.

[Marco]

Auch im IE?

Nein, aber das ist nicht so wichtig, da ich nur im FF arbeite und dieses Script ausschließlich für eine Admin-Seite verwendet wird.

obei dein Konstrukt aber völlig überflüssig ist, da du die Referenz ja bereits hast, es ist der Rückgabewert von createElement

heißt? welches Konstrukt genau ist jetzt überflüssig?

Marco

[Harlequin]

Yerf!

heißt? welches Konstrukt genau ist jetzt überflüssig?

Das hier:
document.forms["eintrag"].elements[wert].options[document.forms["eintrag"].elements[wert].length] = opt;

das geht so einfacher:
newinput_2.options[document.forms["eintrag"].elements[wert].length] = opt;

Ist mir selber gar nicht aufgefallen, das es unsinnig ist nach dem Element im Formular zu suchen, wenn man ein paar Zeilen vorher es in einer Variable gelegt hat (oder besser gesagt die Referenz darauf)...

Ansonsten solltest Du dir aber auch die anderen Anmerkungen von Struppi zu Herzen nehmen.

Gruß,

Harlequin

[Struppi]

heißt? welches Konstrukt genau ist jetzt überflüssig?

Das hier:
document.forms["eintrag"].elements[wert].options[document.forms["eintrag"].elements[wert].length] = opt;

das geht so einfacher:
newinput_2.options[document.forms["eintrag"].elements[wert].length] = opt;

und noch einfacher:
newinput_2.options[newinput_2.options.length] = opt;

Struppi.

[Marco]

Auch im IE?

Damit klappt's jetzt sogar im IE (7). Danke

Ansonsten solltest Du dir aber auch die anderen Anmerkungen von Struppi zu Herzen nehmen.

Von welchen anderen Anmerkungen redest du? War alles hilfreich ;) (danke auch dafür)

[Harlequin]

Yerf!

Von welchen anderen Anmerkungen redest du? War alles hilfreich ;) (danke auch dafür)

Die zum <script>-Tag (type Attribut), den ChildNodes und dem setAttribute. Diese Sachen sind gerne Fehlerquellen, die man auf den ersten Blick nicht sieht.

Gruß,

Harlequin

[rfb]

Moin

heißt? welches Konstrukt genau ist jetzt überflüssig?

document.forms["eintrag"].elements[wert]
ist zu ersetzen durch
newinput_2

Gruß
rfb

[Struppi]

Dann existiert eines dieser Objekte nicht oder mehrfach.

um was für ein Element handelt es sich denn bei "doc"? document? ansonsten habe ich keine anderen Elemente dieser Art.

Keine Ahnung wir können nicht hellsehen.

<script language="JavaScript">

Das das language Attribut in den meisten HTML Versionen "deprciated" ist weißt du? Und das notwendige type Attribut ist mit Absicht entfernt worden?

var a = (kasten.childNodes.length)-3;
  var b = kasten.childNodes[a].name;

Das halte ich für sehr zweifelhaft, die Browser zählen die Knoten unterschiedlich, daher ist diese Variante insbesondere da sie keinerlei Fehlerprüfung beinhaltet mit grosser wahrscheinlichkeit für dein Problem vernatwortlich, läßt sich aber ohne das HTML nicht zuverlässig sagen.

var newinput = document.createElement("input");
  newinput.setAttribute("name","thema_name_"+ (zahl));
  newinput.setAttribute("value","Text");
  newinput.setAttribute("style","float: left;");

Der IE reagiert hin und wieder auf set- und getAttribute merkwürdig

Das läßt sich wesntlich lesbarer so umsetzen:
newinput.name = "thema_name_"+ (zahl);
newinput.value = "Text";
newinput.style.float = 'left';

document.forms["eintrag"].elements[wert].options[document.forms["eintrag"].elements[wert].length] = opt;

Mal abgesehen davon, dass das nicht schön aussieht, du solltest immer prüfen was du verwendest.

Ansonsten läßt sich wie gesagt der Fehler so nicht finden, wir können weder den Code testen noch hellsehen, du musst uns sagen was du machst.

Struppi.

[molily]

Hallo,

newinput.style.float = 'left';

Eher .style.cssFloat und .style.styleFloat für den IE.

Mathias

[Juan]

Hi,

@Juan
Warum ist denn eval nicht zu empfehlen? Aus Sicherheitsgründen oder warum?

durchsuch einfach das Archiv danach :-)

@Struppi
Inwiefern hilft mir das, mein Problem zu lösen? Schließlich wird doch in Schema 4 nur beschrieben, wie ich anderweitig auf das Element mit einem bestimmten Namen zugreife, nicht wie ich irgendeine Stringvariable einbinde oder sehe ich das falsch?

Ja, das siehst du falsch.
Laut Schema 4 kannst du in die eckigen Klammern einen String eintragen. Nichts spricht dagegen, dass dieser String aus einer Variablen kommt.
Du kannst also z.B. so zugreifen:

  
var wert = "thema_wert_"+ (zahl);  
document.forms.Formularname.elements[wert]  

Grüsse,
  Juan