Anzahl der Radio-Buttons ist "undefined"

[Romero]

Hallöchen an Euch,

ich stehe vor einem echt kniffligem Problem:

Ich erzeuge in meinem Script verschiedene Radio-Buttons (unterschiedliche Anzahl) aber alle mit einem "Namen" um darauf zugreifen zu können.

Nun ist es da aber wie ein Lotterie-Spiel, dass mit das Script mittels alert auch deren Anzahl anzeigt. In den meisten Fällen zeigt es mir "undefined" an. Obwohl ich die Radio-Buttons erkenne und ich, wenn ich einen neuen anklicke, auch den Punkt auf die neue Auswahl "springen" sehe.

Hier mal mein Script-Auszug:

function Button_push()  
{  
	document.getElementById( "STL_Meldungen_Fehler" ).innerHTML = '<font color="darkred" id="TAKSY_Auslesedaten_Eingabetext"></font><br><font color="darkred" id="TAKSY_Auslesedaten_Eingabetext_Radiobuttons"></font><input type="button" id="TAKSY_Auslesedaten_Weiter" value="Weiter" style="width:80px" class="STL_Meldungen_Button"><input type="button" id="TAKSY_Schleife_Weiter" value="Weiter" style="width:80px" class="STL_Meldungen_Button"><input type="button" id="TAKSY_Auslesedaten_Bestätigung" value="Bestätigen" style="width:80px" class="STL_Meldungen_Button"> (Keine Markierung = keine Auslesung)';  
  
	if( Abfrage diverser Daten )  
	{  
		if( weitere Abfrage diverser Daten )  
		{  
			document.getElementById( "TAKSY_Auslesedaten_Eingabetext_Radiobuttons" ).innerHTML = '<input type="radio" name="TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl" value="' + x[0] + y[0] + '">' + x[0] + y[0] + ' <input type="radio" name="TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl" value="' + x[0] + y[0] + "_" + HTZ[0].split("-")[1].substr(3,2) + '">' + x[0] + y[0] + "_" + HTZ[0].split("-")[1].substr(3,2) + ' ';  
			// über alert() wird hier die richtige Anzahl (2 Stk) angezeigt  
  
			Schleife_Auslesung( Tabellenblatt_Anzahl, jj )  
  
			function Weiter_Auslesung( Tabellenblatt_Anzahl, jj )  
			{  
					document.getElementById( "TAKSY_Auslesedaten_Eingabetext_Radiobuttons" ).innerHTML = '<input type="radio" name="TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl" value="' + x[jj] + y[jj] + '" checked>' + x[jj] + y[jj] + ' ';  
					// über alert() wird hier manchmal "undefined" angezeigt  
			};  
  
			function Schleife_Auslesung( Tabellenblatt_Anzahl, jj )  
			{  
				document.getElementById( "TAKSY_Auslesedaten_Weiter" ).onclick = function()  
				{  
					for( var k = 0; k < document.Auswahl.TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl.length; k++ )  
					{  
						// über alert() wird hier ebenfalls manchmal "undefined" angezeigt  
					};  
  
					Weiter_Auslesung( Tabellenblatt_Anzahl, jj );  
				};  
			};  
		};  
	};  
};

Das mal ganz grob die wichtigsten Funktionen und Abläufe. Und ich find da diesen verfluchten Fehler nicht.
Bevor diese Schleifen starten, zeigt er mir aber die richtige Anzahl an. Warum dann aber später nicht mehr? Auch wenn ich diese besagte ID mittels *.innerHTML = "" "bereinige", wird dieser nicht-definierte-Anzahl angezeigt?

Brauch da dringend Hilfe.

Vielen Lieben Dank dafür schonmal.

LG Romero

[Felix Riesterer]

Lieber Romero,

ich verstehe nicht, warum Du innerhalb von Button_push() weitere Funktionen "einfach so" definierst. Diese werden als anonyme Funktionsobjekte akzeptiert... aber nicht ausgeführt!

Dein Code noch stärker verkürzt:

function Button_push()

{
Schleife_Auslesung( Tabellenblatt_Anzahl, jj )

/* hier wird eine Schleife definiert, innerhalb derer genau eine Anweisung
 * ausgeführt wird: Die Funktionsdeklaration von Weiter_Auslesung().
 * Ein Anweisungsblock mit geschweiften Klammern fehlt hier, weshalb diese
 * Funktionsdeklaration das einzige Element innerhalb der Schleife ist.
*/

  	function Weiter_Auslesung( Tabellenblatt_Anzahl, jj )  
  	{  

// [...]
};

  	function Schleife_Auslesung( Tabellenblatt_Anzahl, jj )  
  	{  

// [...]
};
};

  
Meine Fragen an Dich:  
  
1\.) Warum willst Du Funktionsobjekte innerhalb einer Schleife immer wieder neu definieren? Warum sollen sie auch gleich noch "globale Variablen" (lies: Methoden des window-Objektes) sein? Anstatt "function foo () {}" kannst Du ja auch folgendes notieren: "window.foo = function () {};"...  
  
2\.) Wo genau wird "Schleife\_Auslesung()" definiert, und wo wird es ausgeführt? Analog dazu auch "Weiter\_Auslesung"?  
  
Solltest Du mit der zugrunde liegenden Objektorientierung von JavaScript noch kämpfen, dann empfehle ich Dir meinen Artikel ab dem Kapitel "[objektorientierter Ansatz](http://wiki.selfhtml.org/wiki/JavaScript/Fader-Framework/objektorientierter_Ansatz)".  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)

[Romero]

Lieber Romero,

ich verstehe nicht, warum Du innerhalb von Button_push() weitere Funktionen "einfach so" definierst. Diese werden als anonyme Funktionsobjekte akzeptiert... aber nicht ausgeführt!

Dein Code noch stärker verkürzt:

function Button_push()

{
Schleife_Auslesung( Tabellenblatt_Anzahl, jj )
/* hier wird eine Schleife definiert, innerhalb derer genau eine Anweisung

• ausgeführt wird: Die Funktionsdeklaration von Weiter_Auslesung().
• Ein Anweisungsblock mit geschweiften Klammern fehlt hier, weshalb diese
• Funktionsdeklaration das einzige Element innerhalb der Schleife ist.
  */

  	function Weiter_Auslesung( Tabellenblatt_Anzahl, jj )  
  	{  

// [...]
};

  	function Schleife_Auslesung( Tabellenblatt_Anzahl, jj )  
  	{  

// [...]
};
};

>   
> Meine Fragen an Dich:  
>   
> 1.) Warum willst Du Funktionsobjekte innerhalb einer Schleife immer wieder neu definieren? Warum sollen sie auch gleich noch "globale Variablen" (lies: Methoden des window-Objektes) sein? Anstatt "function foo () {}" kannst Du ja auch folgendes notieren: "window.foo = function () {};"...  
>   
> 2.) Wo genau wird "Schleife\_Auslesung()" definiert, und wo wird es ausgeführt? Analog dazu auch "Weiter\_Auslesung"?  
>   
> Solltest Du mit der zugrunde liegenden Objektorientierung von JavaScript noch kämpfen, dann empfehle ich Dir meinen Artikel ab dem Kapitel "[objektorientierter Ansatz](http://wiki.selfhtml.org/wiki/JavaScript/Fader-Framework/objektorientierter_Ansatz)".  
>   
> Liebe Grüße,  
>   
> Felix Riesterer.  
  
Hy Felix,  
  
um das Oben kurz zu erklären.  
Mit der function Button\_push() werden meine Eingabedaten "übernommen", geprüft und da weitere Abfragen gestartet. Und die andren function's sind einfach "nur" Stopper, wo das Script warten muss, bis der User eine weitere Eingabe gemacht hat.  
  
Aber darum ging es ja gar nicht. Die Frage war, warum ich ein "undefined" erhalte, wenn ich unterschiedliche Radio-Buttons habe.  
  
Ich habe nun herausgefunden, dass ich, bevor ich das Alles erstelle, 24 Formular-Elemente in meinem Script bis dato habe.  
  
Nun kommt aber folgende Anweisung hinzu:  
  
`document.getElementById( "STL_Meldungen_Fehler" ).innerHTML = '<font color="darkred" id="TAKSY_Auslesedaten_Eingabetext"></font><br><font color="darkred" id="TAKSY_Auslesedaten_Eingabetext_Radiobuttons"></font><input type="button" id="TAKSY_Auslesedaten_Weiter" value="Weiter" style="width:80px" class="STL_Meldungen_Button"><input type="button" id="TAKSY_Schleife_Weiter" value="Weiter" style="width:80px" class="STL_Meldungen_Button"><input type="button" id="TAKSY_Auslesedaten_Bestätigung" value="Bestätigen" style="width:80px" class="STL_Meldungen_Button"> (Keine Markierung = keine Auslesung)';`{:.language-javascript}  
  
Eine Zeile mit 3 Buttons sowie 2 "Text-Einfüge-Elemente" (font's mit ID's). Hier dann sozusagen 5 weitere Formular-Elemente.  
Und bei den 2 Text-Einfüge-Elemente, füge ich nun unterschiedlichen Text ein:  
  
`document.getElementById( "TAKSY_Auslesedaten_Eingabetext" ).innerHTML = 'Text';`{:.language-javascript}  
  
Je nachdem was ich brauche. Bei einem der Text-Einfüge-Element füge ich nun eine gewisse Anzahl an Radio-Buttons ein:  
  
`document.getElementById( "TAKSY_Auslesedaten_Eingabetext_Radiobuttons" ).innerHTML = '<input type="radio" name="TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl" value="' + x[0] + y[0] + '">' + x[0] + y[0] + ' <input type="radio" name="TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl" value="' + x[0] + y[0] + "_" + HTZ[0].split("-")[1].substr(3,2) + '">' + x[0] + y[0] + "_" + HTZ[0].split("-")[1].substr(3,2) + ' ';`{:.language-javascript}  
  
Nun möchte ich gern, dass aus einem Radiobutton nur noch einer wird oder anders gesagt, ich überschreibe die "alte" ID mit neuen Radiobuttons:  
  
`document.getElementById( "TAKSY_Auslesedaten_Eingabetext_Radiobuttons" ).innerHTML = '<input type="radio" name="TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl" value="' + x[jj] + y[jj] + '">' + x[jj] + y[jj] + ' ';`{:.language-javascript}  
  
Wenn ich mir dann wiederrum die Anzahl und auch den Namen dieser Formular-Elemente anzeigen lasse, steht da der richtige Name sowie (anhand nur noch einem Radio-Button) anhand der vorherigen Anzahl ein Element weniger da.  
  
Aber wenn ich mir nun die Länge dieses Element Radio-Button ausgeben möchte, wo er nun (s.o.) nur noch 1 Button hat, so müsste er mir doch Länge = 1 ausgeben. Das tut er nicht sondern gibt mir "undefined" aus.  
  
Aber ich liste mir ihn doch auf, diesen Namen. Sehe ihn ja aber mittels `document.Auswahl.TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl.length`{:.language-javascript} kann ich diesen 1 Namen nicht ansprechen.  
Erstelle ich aber im nachhinein 2 neue Buttons, dann bringt er mir Länge = 2. Sind es sogar mehr als beim 1. mal erstellen der Radiobuttons, klappt das auch. Nur bei weniger als die vorher angegebenen.  
  
Und da weiß ich echt nicht wo das Problem liegt.  
  
LG Romero

[Romero]

Hab herausgefunden, dass, wenn ich nur 1 Radio-Button habe, dass es ein Objekt ist. Und keine HTMLCollection.
Und deshalb kann ich da auch keine length-Abfrage starten.

Da also nun die Frage: Wie schaffe ich es trotzdem, dass ich beide "Längen" nutzen kann?
Einmal die des Formular-Elements, welches ich ansprechen will und einmal dieses als Objekt.

Weil brauche die Länge für eine for-in-Schleife. Und da ermittle ich das angekreuzte RadioButton so:

for( var k = 0; k < document.Auswahl.TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl.length; k++ )  
{  
	if( document.Auswahl.TAKSY_Auslesedaten_Eingabetext_Radiobuttons_Auswahl[k].checked == true )  
	{  
		//--> tu was.  
	};  
};

Und wenn das dann ja als Länge 1 hat, geht das mit der length-Angabe ja nicht.
Wie kann also beide Varianten nutzen?

LG Romero

[unknown]

Und wenn das dann ja als Länge 1 hat, geht das mit der length-Angabe ja nicht.
Wie kann also beide Varianten nutzen?

Na wenn du das jetzt schon rausgefunden hast, sollte es dir doch leicht fallen das zu beheben.
Entweder indem du an jeder Stelle, wo die Abfrage erfolgt, beide Fälle beachtest, was aber nicht schön ist.
Oder du erzeugst dir auch für den Fall, wo keine HTMLCollection geliefert wird etwas, was .length und den operator [] unterstützt. Mehr verwendet man von der HTMLCollection idR nicht.

var radios = document.form.radio.length ? document.form.radio : [document.form.radio];

[Romero]

Und wenn das dann ja als Länge 1 hat, geht das mit der length-Angabe ja nicht.
Wie kann also beide Varianten nutzen?

Na wenn du das jetzt schon rausgefunden hast, sollte es dir doch leicht fallen das zu beheben.
Entweder indem du an jeder Stelle, wo die Abfrage erfolgt, beide Fälle beachtest, was aber nicht schön ist.
Oder du erzeugst dir auch für den Fall, wo keine HTMLCollection geliefert wird etwas, was .length und den operator [] unterstützt. Mehr verwendet man von der HTMLCollection idR nicht.

var radios = document.form.radio.length ? document.form.radio : [document.form.radio];

hy unknown, wieder du :)

ich wusste die richtige Codierung nicht.
Also bräuchte ich nur dein var radios = document.form.radio.length ? document.form.radio : [document.form.radio]; an meinen Code anpassen und frage da gleichzeitig beide Situationen ab?

LG Romero

[Matthias Apsel]

Om nah hoo pez nyeetz, Romero!

Also bräuchte ich nur dein var radios = document.form.radio.length ? document.form.radio : [document.form.radio]; an meinen Code anpassen und frage da gleichzeitig beide Situationen ab?

Das ist eine Kurzschreibweise von

var radios;  
if ((radios = document.form.radio.length) == true) {  
  radios = document.form.radio;  
}  
else {  
  radios = [document.form.radio];  
}

Matthias

[Romero]

Om nah hoo pez nyeetz, Romero!

Also bräuchte ich nur dein var radios = document.form.radio.length ? document.form.radio : [document.form.radio]; an meinen Code anpassen und frage da gleichzeitig beide Situationen ab?

Das ist eine Kurzschreibweise von

var radios;

if ((radios = document.form.radio.length) == true) {
  radios = document.form.radio;
}
else {
  radios = [document.form.radio];
}

>   
> Matthias  
  
Ah alles klar, so hätte ich es ja in etwa dann geschrieben ;)  
  
Aber wie kann ich dann drauf zugreifen, wenn ich überprüfen will, ob und welches Radio-Button ge"checked" wurde?  
  
~~~javascript
var radios = document.form.radio.length ? document.form.radio : [document.form.radio];  
for( var i = 0; i < radios; i++ )  
{  
	alert( radios[i].checked ) //-> wäre glaub ich falsch, da radios ja die Länge ist  
};

Müsste ich da eine weitere Variable einbauen?
So vielleicht?
var radios_checked = document.form.radio ? document.form.radio : [document.form.radio];

LG Romero

[misterunknown]

Moin,

var radios = document.form.radio.length ? document.form.radio : [document.form.radio];

for( var i = 0; i < radios; i++ )
{
alert( radios[i].checked ) //-> wäre glaub ich falsch, da radios ja die Länge ist
};

  
Nein, guck dir den Code nochmal an. radios ist \_nicht\_ die Länge, sondern ein Array und zwar in jedem Fall. Du kannst also einfach per radios.length auf die Anzahl der Elemente zugreifen. Das siehst du auch, wenn du dir den von Matthias ausgeschriebenen Code zu dem ternären Ausdruck anguckst.  
  
Korrekt wäre also:  
~~~javascript
for( var i = 0; i < radios.length; i++ )  
{  
  alert( radios[i].checked ) // ist richtig, da radios _immer_ ein Array von HTML-Objekten ist  
                             // auch wenn es nur ein Element gibt  
};

Grüße Marco