Array Javascript (Dynamisches Formular)

[Vice Dee aka SanY]

Hi,

ich bins schonwieder.
Jetzt bin ich schon beim nächsten Problem. Und zwar mir wurde gestern im Forum hier gesagt, dass ich dieses Script mit Arrays machen sollte. Nun meine Versuche scheitern xD, es wird beim Klick auf "Hinzufügen" nichts mehr angezeigt. Ich glaube dass der Fehler irgendwo im Array liegt.

Hier das Script:

<script type="text/javascript">  
var i = 1;  
function NeuesFeld()  
{  
	var row = document.getElementById('styles_eingabe').insertRow(i);  
	var cell_1 = row.insertCell(0);  
	var cell_2 = row.insertCell(1);  
	var cell_3 = row.insertCell(2);  
  
	var text = document.createTextNode((i + 1)+'.');  
	cell_1.appendChild(text);  
  
	var input = document.createElement('input');  
	input.type = 'text';  
	input.name = 'mix[]';  
	input.style.border = "1px inset #CCC";  
	input.style.margin = "2px 0px";  
	  
	var style = document.createElement('select');  
	style.name = 'style[]';  
	style.style.margin = "2px 3px";  
	style.style.border = "1px inset #CCC";  
	option1 = document.createElement('option');  
	option2 = document.createElement('option');  
	option3 = document.createElement('option');  
	option4 = document.createElement('option');  
	option5 = document.createElement('option');  
	option6 = document.createElement('option');  
	var optionen = new Array ("Hands Up", "Hardstyle", "Happy Hardcore", "Hardcore", "House/Electro", "Trance");  
	option1.appendChild(optionen[0]);  
	option2.appendChild(optionen[1]);  
	option3.appendChild(optionen[2]);  
	option4.appendChild(optionen[3]);  
	option5.appendChild(optionen[4]);  
	option6.appendChild(optionen[5]);  
	style.appendChild(option1);  
	style.appendChild(option2);  
	style.appendChild(option3);  
	style.appendChild(option4);  
	style.appendChild(option5);  
	style.appendChild(option6);  
	  
	  
	cell_2.appendChild(input);  
	cell_3.appendChild(style);  
  
	i++;  
}  
</script>

[bleicher]

Grüße,

1. das ist immer noch sehr chinesisch
2. kannst du bitte ein beispiel online stellen? das dauert nur 1 minute und wir könnten live sehen was dir nciht passt?
   MFG
   bleicher

[Vice Dee aka SanY]

Hi,

klar kann ich das machen.
Hier der link:

http://djsany.de/test/javascript.php

Dieses Script soll quasi per knopfdruck zwei Weitere Felder hinzufügen, die selben, wie sie zu einem schon vorhanden sind. Leider jedoch wird hier wenn ich es versuche mit arrays umzusezten dies nicht erledigt. Zuvor hätte es funktioniert, so wie du es aus meinem "chinesischem" :-D Skript schon kanntest. Vielleicht gibt es ja da noch einige Dinge die ich lernen muss oder beachten sollte, um aus einem Array diese Werte herauszuziehen.
Schonmal im Voraus vielen Dank!

Mfg

SanY

[Vice Dee aka SanY]

Noch eine kleine Beifügung:

Ich denke, dass es mit einer sauberen verwendung von Arrays oder anderen Dingen sicherlich professioneller wirkt als zuvor :-D

LG

[bleicher]

Grüße,
bist du
a)Faul
oder
b)hast Opera noch nicht installiert?

du kannst übrigens nicht einfach nur Text an ein elemnt anhängen - du musst den entweder in ein TextNode packen oder als Eigenschaft zuweisen

wenn du einer OPtion etwas zuweisen willst, hast du die Wahl zwischen innerText, innerHTML, value etc. einfach so kannst du sowas nciht machen

sag ma - codest du etwa ohne debugger?
MFG
bleicher

[Vice Dee aka SanY]

Hi,

nein ich bin nicht faul und Opera habe ich leider auch noch nicht installiert. Was ich aber umgehend machen werde, versprochen. Nein ich arbeite nicht ohne debugger was CSS, HTML und PHP anbelangt. Bei Javascript ist es allerdings etwas anders, da ich es so gut wie fast nie verwende, wusste ich garnicht, dass es dafür auch etwas gibt, sorry.
Wie packe ich das alles nun so in ein TextNode, dass es nicht wie ein Chinesischer Skript aussieht? Vielleicht, aber nur wenn du lust hast könntest du es mir an einem kleinen Beispiel demonstrieren, ja ich weiß ich muss noch viel lernen. Ich weiß ich weiß ich bemühe mich auch.
Trotzdem bin ich um eure Hilfe hier sehr dankbar :-).
PS: Ihr müsst mir ja kein neues Script schreiben, nur sagen was ich hier falsch gemacht habe. Was du in diesem Fall auch gemacht hast. Nur leider verstehe ich aus unnwissenheit nicht ganz, wie ich dies reallisieren kann.
Ich hoffe du kannst dich in mich hineinversetzen :-D.

Mfg

SanY

[bleicher]

Grüße,
ah.. nur weuil so gütig bin, kein bock habe an meinem Bericht weiterzuarbeiten und du wohl ein Operajunger wirst^^

nehmen wir den extrem repetitiven teil hier:

  
 option1 = document.createElement('option');  
        option2 = document.createElement('option');  
        option3 = document.createElement('option');  
        option4 = document.createElement('option');  
        option5 = document.createElement('option');  
        option6 = document.createElement('option');  
        var optionen = new Array ("Hands Up", "Hardstyle", "Happy Hardcore", "Hardcore", "House/Electro", "Trance");  
        option1.appendChild(optionen[0]);  
        option2.appendChild(optionen[1]);  
        option3.appendChild(optionen[2]);  
        option4.appendChild(optionen[3]);  
        option5.appendChild(optionen[4]);  
        option6.appendChild(optionen[5]);  
        style.appendChild(option1);  
        style.appendChild(option2);  
        style.appendChild(option3);  
        style.appendChild(option4);  
        style.appendChild(option5);  
        style.appendChild(option6);  

und sagen einfahc .- am anfang war das Array
(so wohl kaum lauffähig, nur als beispiel)

  
 var optionen = new Array ("Hands Up", "Hardstyle", "Happy Hardcore", "Hardcore", "House/Electro", "Trance");  
var opt;  
for(var q in optionen){  
     opt=document.createElement('option');  
     opt.innerText=optionen[q];  
     style.appendChild(opt);  
}  

das davor brauchst du zwar auch noch - die deklaration von style etc.^^ aber sont -
das wars - und alles was du jetzt brauchst ist den array mit Kategorien zu verändern - du musst nun keine 10 appends anpassen, wenn du mal ein Element hinzufügst oder entfernst

MFG
bleicher

[Vice Dee aka SanY]

Hi,

suuper vielen dank :-), funktioniert klasse!
Ich muss zudem sagen, Opera gefällt mir auf den ersten Blick schonmal sehr gut :-) auch dieser Dragonfly ist klasse. Vielen dank nochmal für den Tipp, das wird meine Arbeiten in Zukunft sicher um einiges erleichtern ^^.

LG

SanY

[Vice Dee aka SanY]

Hi,

nochmals danke für das Skript!
Mir ist jedoch gestern aufgefallen, dass dieses nur in Opera funktioniert. Heute wollte ich es mit dem Firefox öffnen, dort bleibt es jedoch Wirkungslos. Es werden daher keine Werte in 'option' eingetragen.

LG

SanY

[bleicher]

Grüße,

Mir ist jedoch gestern aufgefallen, dass dieses nur in Opera funktioniert. Heute wollte ich es mit dem Firefox öffnen, dort bleibt es jedoch Wirkungslos. Es werden daher keine Werte in 'option' eingetragen.

was sagt die fehlerkonsole von FF?
wundert mich aber - diese "funktion" ist so "basic" - das sollte sogar mit ie gehen... hmm
bau mal alerts an ein paar stellen dazwischen ein - und kuk wie weit der script überhaupt kommt
MFG
bleicher

[Vice Dee aka SanY]

Hi,

also ich habs mit alert probiert und es ist völlig egal wo ich das hinsetze ob ganz ans ende, iwo dazwischen, ganz am anfang oder ausherhalb der funktion. Es wird immer ordnungsgemäs angezeigt.
Die Fehlerkonsole von FF bringt mir auch nichts. Sehr seltsam, da alles ordnungsgemäß abläuft, nur der inhalt, quasi der Text der options wird nicht angezeigt. Das sind die Werte, die in dem array abgelegt sind.

LG

SanY

[bleicher]

Grüße,
ich habe kein FF es zu untersuchen - du kannast aber auch elemnte "alerte" - versuch mal sofort nach dem du ein element einfügst den lastChild der liste auszugeben und überprüfe was die varibalen so haben - ich befürchte dass der fehler weit davor liegt- irgendwo im bereich der variabnlendeklaration oder änliches - weder arrays noch optionselemente werden bei ff/Opera unterschiedlich behandelt - sicher, dass die cells ordnungsgemäß erzeugt und angehängt werden?
MFG
bleicher

[Vice Dee aka SanY]

Hi,

also ich habe das Problem nun gelöst. Ich habe einfach innerText, durch innerHTML ersetzt. Nun funktioniert es einwandfrei!
Trotzdem vielen dank für eure Mühen!
Bis zum nächsten Problem :-P :-D.

LG

SanY

[Struppi]

also ich habe das Problem nun gelöst. Ich habe einfach innerText, durch innerHTML ersetzt. Nun funktioniert es einwandfrei!

Der richtige Wert wäre in dem Fall .value gewesen.

Struppi.

[bleicher]

Grüße,

Der richtige Wert wäre in dem Fall .value gewesen.

AFAIK aber nicht das gleiche - es kann doch unterschiedliche value/text haben?
MFG
bleicher

[Struppi]

Grüße,

Der richtige Wert wäre in dem Fall .value gewesen.

AFAIK aber nicht das gleiche - es kann doch unterschiedliche value/text haben?

stimmt.
.text ist die Eigenschaft die ich meinte.

Struppi.

[Struppi]

Die Fehlerkonsole von FF bringt mir auch nichts.

Das ist nicht wahr.
Fehler: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLOptionElement.appendChild]"  nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)"  location: "JS frame :: http://djsany.de/test/javascript.php :: NeuesFeld :: line 34"  data: no]

Du kannst nicht schreiben [option].appendChild([String]), du müßtest einen Textknoten erzeugen bevor du das schreiben könntest.

einfacher und übersichtlicher ist aber die Verwendung von http://de.selfhtml.org/javascript/objekte/options.htm@title=options

Struppi.

[bleicher]

Grüße,
ich habe ihm doch die Lösung mit innerText vorgeschlagen  erinnere mich aber nicht auf Anhieb ob das geht - muss eigentlich
MFG
bleicher

[Struppi]

ich habe ihm doch die Lösung mit innerText vorgeschlagen  erinnere mich aber nicht auf Anhieb ob das geht - muss eigentlich

Nein, dass ist IE only.

Struppi.

[bleicher]

Grüße,

ich habe ihm doch die Lösung mit innerText vorgeschlagen  erinnere mich aber nicht auf Anhieb ob das geht - muss eigentlich

Nein, dass ist IE only.

warum eigentlich? innerText ist ebenso eine eigenschaft wie id oder class - wieso darf der nicht ohne weiteres ein wert zugewiesen werden?

MFG
bleicher

[Struppi]

ich habe ihm doch die Lösung mit innerText vorgeschlagen  erinnere mich aber nicht auf Anhieb ob das geht - muss eigentlich

Nein, dass ist IE only.

warum eigentlich? innerText ist ebenso eine eigenschaft wie id oder class - wieso darf der nicht ohne weiteres ein wert zugewiesen werden?

Dürfen darfst du wollen, aber es hat keine Auswirkungen. Nur der IE (und Opera?) setzen innerText dann um.

Struppi.

[ChrisB]

Hi,

option1 = document.createElement('option');

option1.appendChild(optionen[0]);

Neue OPTIONs zu eine SELECT-Feld hinzufügen geht auch einfacher:
http://de.selfhtml.org/javascript/objekte/options.htm#neue_elemente

Und bei der Methode brauchst du auch nicht erst selber Textknoten erzeugen und einhängen, sondern kannst direkt mit dem Textstring arbeiten.

MfG ChrisB

[Vice Dee aka SanY]

Hi,

ok dank dir :-) das ist natürlich auch ein guter weg.

LG

SanY