onChange oder onClick über node einfügen

[Re-Z]

Hallo,
ich möchte dynamisch ein drop-down Feld erzeugen. Das heißt, sobald im Drop-Down Feld "group1" ein Value ausgewählt wurde, das größer als 0 ist, soll ein weiteres Drop-Down Feld erscheinen. Das soll die gleichen Eigenschaften wie "group1" enthalten, mit dem Unterschied, dass das Feld "group11" heißt. Das Problem dabei ist jetzt nur, dass mein onChange-Attribut in "group11" nicht funktioniert.Sobald ich den Wert ändere, passiert...nichts.

Ich hoffe, dass mir jemand helfen kann. Danke!
Hier ist mein JScript :

<script language="javascript">
function addGroup(name){
var anzahl = document.getElementsByName(name)[0].length;
var value;
var i = 0;
while(i < anzahl){
  if(document.getElementsByName(name)[0].options[i].selected == true){
   value = document.getElementsByName(name)[0].options[i].value;
   break;
  }
  i = i + 1;
}
if(value > 0){
  var laenge = name.length - 5;
  var zahl = name.substr(5, laenge);
  zahl += 1;
  var neuername = "group".concat(zahl);

var tableRow    = document.createElement("tr");
  var tableColumn = document.createElement("td");
  var dropdown    = document.createElement("select");
  var dd_default  = document.createElement("option");
  var dd_text     = document.createTextNode("bitte auswählen");

var dd_name     = document.createAttribute("name");
  var dd_value    = document.createAttribute("value");
  var dd_select   = document.createAttribute("selected");
  var dd_change   = document.createAttribute("onChange"); // <-- WICHTIGE STELLE 1

dd_name.nodeValue  = neuername;
  dd_value.nodeValue = '0';
  dd_change.nodeValue = 'javascript:addGroup("'+neuername+'");'; // <-- WICHTIGE STELLE 2

dd_default.setAttributeNode(dd_value);
  dd_default.setAttributeNode(dd_select);
  dropdown.setAttributeNode(dd_name);
  dropdown.setAttributeNode(dd_change); // <-- WICHTIGE STELLE 3

dd_default.appendChild(dd_text);
  dropdown.appendChild(dd_default);

<?php $i = 0;
  while($i < count($groups['id'])){?>
  var dd_entry = document.createElement("option");
  var dd_entry_value = document.createAttribute("value");
  dd_entry_value.nodeValue = '<?php echo $groups['id'][$i]; ?>';
  var dd_entry_text = document.createTextNode('<?php echo $groups['groupname'][$i]; ?>');
  dd_entry.appendChild(dd_entry_text);
  dropdown.appendChild(dd_entry);
  <?php $i++; } ?>

tableColumn.appendChild(dropdown);
  tableRow.appendChild(tableColumn);
document.getElementById("groupTable").appendChild(tableRow);
}
}
</script>

[Henryk Plötz]

Moin,

var dd_change   = document.createAttribute("onChange"); // <-- WICHTIGE STELLE 1

dd_change.nodeValue = 'javascript:addGroup("'+neuername+'");'; // <-- WICHTIGE STELLE 2

dropdown.setAttributeNode(dd_change); // <-- WICHTIGE STELLE 3

Hmm, muss es createAttribute/nodeValue=/setAttributeNode sein? Ist dir dropdown.setAttribute("onchange",'...') nicht kompliziert genug?

Ansonsten: Es ist wahrscheinlich, dass du Spaß mit Groß/Kleinschreibung hast, versuch es einmal mit einem kleinen 'C'. Und noch einfacher und mit absoluter Erfolgsgarantie: Setze den Handler nicht umständlich indirekt über Attribute sondern direkt: dropdown.onchange=; bzw. über DOM 2 Events: dropdown.addEventListener("change", ...) (meinetwegen auch das Krüppel-IE-Äquivalent).

Was mir grade auffällt: Mach das "javascript:" weg, das ist in Event-Handlern falsch.[1]

[1] Naja, nicht direkt syntaktisch falsch, aber es bedeutet nicht das, was man zunächst glauben wollte.

[Re-Z]

Tag auch nochmal,

Hmm, muss es createAttribute/nodeValue=/setAttributeNode sein? Ist dir dropdown.setAttribute("onchange",'...') nicht kompliziert genug?

Ich habe das genommen, was ich grad' gefunden hatte. Mit setAttribute kann ich ja richtig viel Code sparen und es erleichtert die Fehlersuche!

Ansonsten: Es ist wahrscheinlich, dass du Spaß mit Groß/Kleinschreibung hast, versuch es einmal mit einem kleinen 'C'.

Habe lange Zeit mit C++ und der WinAPI rumgespielt, daher der Hang zum 'Camel-Style' ;-)~

Und noch einfacher und mit absoluter Erfolgsgarantie: Setze den Handler nicht umständlich indirekt über Attribute sondern direkt: dropdown.onchange=;

Habe ich probiert, klappt nicht! Vielleicht habe auch was falsch gemacht. Muss man dazu in der <script> Deklaration eine bestimmte JScript Version angeben ?

bzw. über DOM 2 Events: dropdown.addEventListener("change", ...) (meinetwegen auch das Krüppel-IE-Äquivalent).

Klappt auch irgendwie nicht...benutze auch hauptsächlich FireFox. Somit hätte sich das zumindest erledigt ;-)~

Was mir grade auffällt: Mach das "javascript:" weg, das ist in Event-Handlern falsch.[1]

[1] Naja, nicht direkt syntaktisch falsch, aber es bedeutet nicht das, was man zunächst glauben wollte.

So? Was bedeutet es denn ?

Danke für alle Hinweise ! Hat mich sehr weiter gebracht

MfG Re-Z

[wahsaga]

hi,

Was mir grade auffällt: Mach das "javascript:" weg, das ist in Event-Handlern falsch.[1]

[1] Naja, nicht direkt syntaktisch falsch, aber es bedeutet nicht das, was man zunächst glauben wollte.

So? Was bedeutet es denn ?

es wäre an dieser stelle ein sog. label, oder auch sprungmarke auf deutsch.

lasse es in eventhandlern weg, da du es dort a) idR. nicht brauchst, und es b) in älteren browsern, die keine label kennen, zu fehlern führt.

[teil b) ist eher theoretischer natur, denn in derart alten browsern mit DOM-methoden arbeiten zu wollen, wäre ja auch wieder wenig sinnvoll.]

gruß,
wahsaga

[molily]

Hallo,

var anzahl = document.getElementsByName(name)[0].length;

document.forms.name.elements.name ist wahrscheinlich performanter.

Außerdem führst du document.getElementsByName(name)[0] immer wieder aus. Das ist wirklich ein Performancekiller. Führe es einmal aus und speichere den zurückgegebenen Knoten in einer Variable.

var eingabefeld = document.forms.formular.elements[name];

var value;
var i = 0;
while(i < anzahl){
  if(document.getElementsByName(name)[0].options[i].selected == true){
   value = document.getElementsByName(name)[0].options[i].value;

if (eingabefeld.options[i].selected) [
  value = eingabefeld.options[i].value;
usw.
Auch den option-Elementknoten könnte man in einer Variable zwischenspeichern.

var neuername = "group".concat(zahl);

Reduziere die Komplexität wo möglich: Statt concat() geht auch ein simples "group" + zahl.

var dd_name     = document.createAttribute("name");

createAttribute ist meist unnötig kompliziert, setAttribute wie gesagt schon besser.

var dd_change   = document.createAttribute("onChange"); // <-- WICHTIGE STELLE 1

dd_change.nodeValue = 'javascript:addGroup("'+neuername+'");'; // <-- WICHTIGE STELLE 2

Mit einem Function-Statement erzeugt man eine Handler-Funktion, die alle Variablen des gegenwärtigen Geltungsbereiches übernimmt und somit addGroup mit dem richtigen Parameter aufrufen kann:
dropdown.onchange = function () { addGroup(neuername) };

Mathias