dynamisch mit DOM erstelltes dropdown übergibt immer nur 1. selected Wert

[Huby77]

Hallo,
habe jetzt schon alles zu dropdown hier durchgeackert, aber ich finde nicht die Lösung für folgendes Problem:
Ich starte auf einer site eine Form mit einem simplem input Feld und nem Button. Sobald man etwas ins input Feld eingibt, wird der numerische Wert geprüft. Deshalb ist im html code des Buttons der Aufruf einer javascript Funktion eingebaut.

<ol><input type="text" name="zahlX" value="" size="4" 
						onblur="JavaScript: 
						pruefe(this); }
						" /> </ol>

In der pruefe() Funktion passiert das:

var Knoten = document.getElementsByTagName("ol")[0];
	Knoten.removeChild(Knoten.firstChild);
	var myDropdown = document.createElement("select");
	//Werte vorschlagen:
	//Wert vom Anwender durch Richtwert teilen, Rest abschneiden.
	var AnwenderValue = checkUnit2(e.value);
	//div emulieren
	//Ergebnis mit Richtwert multiplizieren;
	var tmpValue = AnwenderValue-(AnwenderValue % e.name).toFixed(2);
	newValue = (tmpValue/e.name);
	//(Ergebnis + 1)*Richtwert = choice1
	var choiceOne = ((newValue + 1)*e.name).toFixed(2);
	//(Ergebnis ohne Änderung)*Richtwert = choice2
	var choiceTwo = (newValue*e.name).toFixed(2);
	//(Ergebnis + 1)*Richtwert = choice3
	var choiceThree = ((newValue - 1)*e.name).toFixed(2);
	if (choiceOne > 0.01)	{
		var myOption1 = document.createElement("option");
		var myText1 = document.createTextNode(choiceOne);
		myOption1.appendChild(myText1);
		myDropdown.appendChild(myOption1);		
	}
	if (choiceTwo > 0.01)	{
		var myOption2 = document.createElement("option");
		var myText2 = document.createTextNode(choiceTwo);
		myOption2.appendChild(myText2);
		myDropdown.appendChild(myOption2);
	}
	if (choiceThree > 0.01)	{
		var myOption3 = document.createElement("option");
		var myText3 = document.createTextNode(choiceThree,choiceThree);
		myOption3.appendChild(myText3);
		myDropdown.appendChild(myOption3);
		
	}
		var wertDropdown = myDropdown.options[myDropdown.selectedIndex].value;
		myDropdown.id = "DD";
		myDropdown.onClick=alert('change'+myDropdown.id);
		myDropdown.onChange=machWas(wertDropdown);
		myDropdown.onMouseOver=machWas(wertDropdown);
	Knoten.appendChild(myDropdown);

Jetzt ist es so, daß die machWas Funktion nur beim allerersten Mal aufgerufen wird.
Beide Funktionen befinden sich in einer header.php Datei, die automatisch bei jedem Seitenaufruf eingebunden wird.
Der Button für das submit soll entsprechend der Auswahl im dropdown modifiziert werden:

<input type="image" id="btt1" src="bild.jpg" alt="wennTextFehlt" title="abschicken" /></td>

innerhalb der pruefen() Funtion:

var Knoten200 = document.getElementById("btt1");
Knoten200.setAttribute ("onMouseOver","machWas('"+myDropdown.options[myDropdown.selectedIndex].value+"');");

Jedesmal wenn ich über den Button gehe, kommt nur der erste Wert des dropdown Menüs.
In der machWas() Funktion steht folgendes:

var Knoten200 = document.getElementById("btt1");
	Knoten200.setAttribute("value",e);

Versuche ich den Wert von dropdown innerhalb der machWas() Funktion zu ermitteln mit

var dropDown = document.getElementById("DD");
	Knoten200.setAttribute("value",dropDown.options[dropDown.selectedIndex].value);

Dann hat dropdown keine properties.
Weiß einer was ich hier falsch mache?
Danke schonmal!

[inco]

1. <input type="text" name="zahlX" value="" size="4" onblur="javascriptruefe(this); }" /> :
- das attribut value ist überflüssig, wenn's leer ist
- ich würde onchange nehmen, denn ohne Eingabe macht alles andere keinen Sinn
- einem eventhandler braucht man kein "javascript:" zuzuweisen -> onchange="pruefe(this.value)";
- diese "}" in Deinem input ist falsch
- schreibe am Besten alle eventhandler klein, auch in Deinem folgenden javascript

2. optionen eines selects kann man ganz einfach so erzeugen:
SELFHTML: JavaScript / Objektreferenz / options

3.

var Knoten = document.getElementsByTagName("ol")[0];
	Knoten.removeChild(Knoten.firstChild);
	var myDropdown = document.createElement("select");
	//Werte vorschlagen:
	//Wert vom Anwender durch Richtwert teilen, Rest abschneiden.
	var AnwenderValue = checkUnit2(e.value);
[...]

- wenn var AnwenderValue mit Inhalt gefüllt wird durch checkUnit2(e.value);
dann existiert doch der Kindknoten / das input nicht mehr, richtig?
sammelst Du vor removeChild() dessen Wert in "e"?
4.

		myDropdown.onClick=alert('change'+myDropdown.id);
		myDropdown.onChange=machWas(wertDropdown);
		myDropdown.onMouseOver=machWas(wertDropdown);
	Knoten.appendChild(myDropdown);

Jetzt ist es so, daß die machWas Funktion nur beim allerersten Mal aufgerufen wird.

Nö, die wird doch sowohl onchange, als auch bei jedem onmouseover aufgerufen, oder?
Nein, im Ernst, wenn Du myDropdown.onChange=machWas(wertDropdown); schreibst,
dann teilst Du myDropdown.onChange das Ergebnis des (sofortigen) Funktionsaufrufs machWas(wertDropdown) zu.

Schreibe statt dessen
myDropdown.onchange = machWas;
und beziehe Dich auf this.value in
function machWas(){
wertDropdown = this.value; // oder this.options[this.selectedIndex].value
}

Ich bin jetzt nicht alles durchgegangen und habe natürlich den ganzen Wust auch nicht testen können.
Es können also noch einpaar andere Schnitzer drin sein.

[Huby77]

Hi inco!
vieelen Dank für deine ausführliche Antwort!

- wenn var AnwenderValue mit Inhalt gefüllt wird durch checkUnit2(e.value);
dann existiert doch der Kindknoten / das input nicht mehr, richtig?
sammelst Du vor removeChild() dessen Wert in "e"?

Ja, natürlich:

<ol><input type="text" name="{/literal}{$PROD_QTY}{literal}" value="" size="4" 
						onblur="JavaScript: 
						a = this.value;
						a= checkUnit2(a);
						if ((a % {/literal}{$PROD_QTY}{literal})==0) {return('korrekt');}
						if ((a % {/literal}{$PROD_QTY}{literal})!=0)  {alert('achtung bla  bla {/literal}{$PRODUCTS_MIN_QTY}{literal}  ');
						pruefe(this); }
						" /> </ol>

Habe aber das meiste weggelassen, da hier ja auch noch mit smarty gearbeitet wird ...(ist wohl jetzt mit checkUnit2 auch doppelt gemoppelt, da sie in pruefe() auch nochmal aufgerufen wird).

- diese "}" in Deinem input ist falsch

Habe ich aus Versehen mitkopiert, kommt ja vom kompletten code.

Nö, die wird doch sowohl onchange, als auch bei jedem onmouseover aufgerufen, oder?
Nein, im Ernst, wenn Du myDropdown.onChange=machWas(wertDropdown); schreibst,
dann teilst Du myDropdown.onChange das Ergebnis des (sofortigen) Funktionsaufrufs machWas(wertDropdown) zu.

Also es lief immer so:
onchange wurde immer nur einmal aufgerufen...
Jetzt mit machWas ohne () jedesmal. Ist das der Grund?

In der machWas() setze ich ja das value Attribut des Knotens neu. Das geht aber immer nur beim ersten mal. (Jedenfalls zeigt firefox das so an.) Ich überprüfe das nochmal mit zend.
Danke nochmal!

[inco]

Jetzt mit machWas ohne () jedesmal. Ist das der Grund?

In der machWas() setze ich ja das value Attribut des Knotens neu. Das geht aber immer nur beim ersten mal.

mit myDropdown.onchange=machWas;
wird machWas jedesmal bei Änderung der selectauswahl (onchange) aufgerufen
mit this.value in function machWas() beziehst Du Dich auf den Wert der aktuell ausgewählten Option eines selects vom Typ select-one (nur eine Auswahl möglich)