Javascript

Computer: Software & Programmierung JavaScript & Script-Sprachen
#1

Liebe/-r Experte/-in,

vielen Dank für die kostenlose Online-Auskunft! Hätte folgende Frage: Ich möchte mir ein javascript mit 2 Formularen (Textarea) erstellen, wo ich in das erste einen Text eingebe, dieser in eine Tabelle geschrieben wird, aber die Buchstaben einzeln z.B. in die Felder 1,3,5 usw. und, wenn eich einen zweiten Text eingebe, die einzelnen Buchstaben in die Felder 2,4,6 usw. geschrieben werden. Wie mache ich das? Könnten Sie mir dabei helfen?

Vielen Dank im Voraus für die Antwort,

mit freundlichen Grüßen,

Martha Beng

#2

Die einfachste Möglichkeit ist mittels str.split("") den String in einen Array zu schreiben, anschließend kann man dann Zeichen für Zeichen in die Felder schreiben, wobei man den index des aktuellen Zeichen entweder mit (index*2) oder mit (index*2)+1 multipliziert.

Gruß
Jakob

#3

Hallo Martha,

ich habe da mal ein Beispiel gebastelt. Schau es dir mal an, schlag die verwendeten Methoden in der Doku nach, z.B. bei de.selfhtml.org und versuche es zu verstehen. Bei Problemen frag einfach nach.

Gruß, Jürgen

Test
// Da die Elemente im HTML erst nach dem laden der Seite zur Verfügung
// stehen, wird das ganze Script erst nach dem Laden der Seite gestartet.
window.onload = function() {
var inp,out,nout,n=0;
// Zugriff auf das Eingabefeld
inp = document.getElementById(„in“);
// Zugriff auf die Ausgabe-Inputs
out = document.getElementById(„out“).getElementsByTagName(„textarea“);
nout = out.length; // Anzahl der Ausgabefeld
// Eventhandler, der auf den „Keyup“ im Eingabefeld reagiert und
// das letzte Zeichen in eines der Outputfelder schreibt.
// Im Eventhandler zeigt „this“ auf das eventauslösende Element.
inp.onkeyup = function() {
out[n].value += this.value.charAt(this.value.length-1);
n++;
if(n>=nout) n = 0;
}
}
Test

#4

Hallo, ich habe mal schnell was zusammengebastelt. Habe es aber nur bei mir im
Safari getestet, sollte aber auch in anderen Browsern funktionieren.

Im Grunde geht das Script durch alle Zeilen und Zellen der Zieltabelle und setzt
immer in einer gerade oder ungeraden den Inhalt der linken oder der rechten
Textarea ein. Als Zeichen für Zeichen.

Das Script lässt sich bestimmt noch optimieren, aber zur Illustration reicht es. :smile:

Funkioniert mit beliebig großen Tabellen:

 Auto Table Filler Test
 function fillCells(data, receiver, even) {
 var tableRows = document.getElementById('receiver').rows
 var counter = rowcounter = cellcounter = stepcounter = 0;
 var row = cell = null;
 //Durch alle Zeilen loopen
 while ((row = tableRows.item(rowcounter)) != null) {
 var tableCells = row.cells;
 //Durch alle Spalten der Zeile loopen
 while ((cell = tableCells.item(cellcounter)) != null) {
 if (even) {
 //Wenn gerade Zelle
 if (stepcounter % 2 == 0) {
 cell.innerHTML = data.value[counter];
 counter++;
 } 
 } else {
 //Wenn ungerade Zelle
 if (stepcounter % 2 != 0) {
 cell.innerHTML = data.value[counter];
 counter++;
 }
 }
 if (counter == data.value.length) break;
 cellcounter++;
 stepcounter++;
 }
 if (counter == data.value.length) break;
 rowcounter++;
 cellcounter = 0;
 }
 }

Schöne Grüße
Mathias Karstädt

#5

Frage: Ich möchte mir ein javascript mit 2 Formularen
(Textarea) erstellen, wo ich in das erste einen Text eingebe,
dieser in eine Tabelle geschrieben wird, aber die Buchstaben
einzeln z.B. in die Felder 1,3,5 usw. und, wenn eich einen
zweiten Text eingebe, die einzelnen Buchstaben in die Felder
2,4,6 usw. geschrieben werden. Wie mache ich das?

hallo martha,
ich empfehle eine funktion (namens parseMe),
die eventgesteuert (z.b. onchange) aufgerufen wird,
um werte von einem formularelement (z.b. blah) zu nehmen,
und teile davon in andere formularelemente zu schreiben.

function parseMe( frm ) {
blahLines = frm.blah.value.split( „\n“ );
frm.text1.value = blahLines[0].charAt( 0 );
frm.text2.value = blahLines[0].charAt( 1 );
frm.sonstwas1.value = blahLines[1].charAt( 0 );
frm.sonstwas2.value = blahLines[1].charAt( 1 );
}

schöne grüße
people

#6

Hallo Martha,
so eine Online-Auskunft ist doch Ehrensache!
Aber leider verstehe ich nicht ganz was du meinst:

Also du hast ein Forumlar 2 Textfelder.

Der Text vom ersten Textfeld kommen die Buchstaben einzeln in Zellen. Genau das gleiche mit dem zweiten?
Koenntest du das spezifischer beschreiben?

Am besten ist, wenn du den Code hier postest, den du bereits hast, so laesst es sich am ehesten helfen.

MfG. Jason

#7

Hallo
Eine Komplettlösung kann ich dir auf die schnelle auch nicht anbieten, aber ich würde vermutlich so vorgehen:

  • auf die Textareas ein Eventhandler (onkeyup) setzen und dort das Skript hinterlegen.
    Dann entweder eine Tabelle mit durchnummerierten Cells (z.B. " usw) im HTML-Form anlegen oder das ganze dynamisch im DOM-Baum erstellen.

Dann im Script eben den Text in den Cells setzen: document.getElementById(‚td1‘).innerHTML = Char

Die gedrückte Taste kriegst du dann evtl. sogar schon vom Keyhandler (http://www.mediaevent.de/javascript/onkeydown.html), ansonsten ist es ja einfach das letzte Zeichen - das müsstest du dann auch über so ein Konstrukt kriegen: x.innerHTML.substr(x.innerHTML.length -1)

Ich hoffe dir hilft das weiter - momentan fehlt mir leider die Zeit, das komplett auszuarbeiten…

#8

Hallo Martha!

ja also ich würde die Tabelle über Javascript erstellen.
Schau mal hier…

http://www.kostenlose-javascripts.de/javascript-tuto…

und

http://christian.bloggingon.net/archive/2009/01/05/e…

Einfach das Textarea auslesen. Entweder machste das bei dem TextChange Event oder über einen Button per Click Event auf diesen.

Entspricht das deinen Vorstellungen?!

Grüße
Matze

#9

Hallo,
erstmal vielen Dank, hab nur ein Problem: anstatt der Buchstaben erscheint immer nur „undefined“. ich möchte gern erreichen, dass die Zeichen so erscheinen, wie ich sie eingebe. Für eine Hilfe diesbezüglich wäre ich sehr dankbar, ansonsten ist es genau das Script, was ich suchte.
Herzlichen Dank im Voraus und gute Feiertage,

freundliche Grüße,
Martha Beng

#10

hallo, people,
erstmal vielen Dank für die Mühe. Allerdings bekomme ich die fehlermeldung: „blah0 ist null oder kein objekt“. Was ist zu tun?

Vielen Dank im Voraus,

mit freundlichen Grüßen,
Martha Beng

#11

Hallo,

bitte formulieren Sie die Frage nachvollziehbar, präzise und evtl. mit dem entsprechenden Kontext. Im Moment klingt das nach einem Versuch ohne konkreten Zweck. Was für eine Tabelle ist gemeint? Was für Felder? Wie sehen die bisherigen eigenen Ansätze aus und an welcher Stelle klemmen diese? Wo liegt das konkrete Problem?

Beste Grüße,

Amica

#12

Welche Browser hast du verwendet? Ich hatte es nur im Safari getestet, wo es
funktionierte.

#13

Hallo,

so richtig verstanden habe ich die Aufgabe und den Sinn dahinter nicht, aber hier mal ein paar Ansatzpunkte zum Weiterarbeiten:

Die einzelnen Felder mit ID Namen versehen, also z.B.
…
…
Jede ID darf auf einer HTML-Seite nur einmal vorkommen und kann dann z.B. mit
document.getElementByID(‚feld1‘).innerHTML = „TEXT“;
per JavaScript mit Inhalten belegt werden.

Zum Auseinanderpflücken eines Textes gibt es String-Funktionen, z.B.
var myString = „Hallo“;
var Zeichen1 = myString.charAt(1);

Funktionen: charAt, substr oder substring, dann eine for Schleife, damit sollte dein Problem lösbar sein.

http://de.selfhtml.org/javascript/objekte/string.htm

Gruß
Chris

#14

Hallo Frau Beng,

ich kann ihre frage wohl leider nicht zu ihrer
zufriedneheit beantworten. Ich kann ihnen nur raten
sich mit den Grundlagen von Javascript zu beschäftigen
und die Problemstellung über eventhandler zu lösen.

Mit diesen können sie auf änderungen in den Formularen
reagieren oder sogar auf jeden tastenschlag. Damit wäre
es ein leichtes auf eingaben zu reagieren und den input
in die entsprechenden tabellenfelder zu kopieren.

Im vorlauf wäre es sicher praktisch die Tabellen mit
eindeutigen ID´s zu versehen um sie mit Javascript
einfacher ansteuern zu können.

Weitere informationen zu Javascript finden sie unter
selfhtml.org

#15

erstmal vielen Dank für die Mühe. Allerdings bekomme ich die
fehlermeldung: „blah0 ist null oder kein objekt“. Was ist zu
tun?

hallo martha,
blah0 müsste das erste element der blahLines sein. betrachte meinen code bitte nicht als copy+paste-funktional sondern vielmehr als illustration meiner ausführungen. die funktion parseMe tut sehr wahrscheinlich noch kein bisschen, was du eigentlich willst… sie muss noch angepasst werden.

schöne grüße
people

#16

Hallo, hab den Internet Explorer 7 verwendet und Firefox.

mit freundlichen grüßen,
Martha

#17

Hallo,

vielen Dank für die kostenlose Online-Auskunft! Hätte folgende
Frage: Ich möchte mir ein javascript mit 2 Formularen
(Textarea) erstellen, wo ich in das erste einen Text eingebe,
dieser in eine Tabelle geschrieben wird, aber die Buchstaben
einzeln z.B. in die Felder 1,3,5 usw. und, wenn eich einen
zweiten Text eingebe, die einzelnen Buchstaben in die Felder
2,4,6 usw. geschrieben werden. Wie mache ich das? Könnten Sie
mir dabei helfen?

Der volle Quelltext (Anwendungsbeispiel) ist auf meiner Seite zu finden: http://frostforum.fr.funpic.de/tabelle.htm

Aber da diese leider nicht immer verfügbar ist, werde ich einen kleinen Auszug des Skripts anfügen:

var t = „“;
for(var i=0;i";
if(i"+s1.substr(i,1)+"";
else t+=" „;
if(i“+s2.substr(i,1)+"";
else t+=" „;
t+=“";
}
t+="";

Tabellen hingegen zu bearbeiten ist allerdings einfach nur unmöglich, da das table-Element keine innerHTMLs zulässt, wie ich es schon in der Vergangenheit machen wollte.

Natürlich geht das gleiche auch mit Textareas, dort könnte man bspw. die einzelnen Zeilen als Zeilen der Tabelle umwandeln. Etwas komplizierter wird es aber mit Trennzeichen, da muss man auf die Indexfunktionen zugreifen. Siehe dazu auch: http://de.selfhtml.org/javascript/objekte/string.htm

Viel Glück - und nicht aufgeben beim Coden!
Endres

#18

Hallo Martha,

ich denke einen fertigen Code hast du nicht erwartet, will nur ein paar Tipps geben. Die sollten aber ohne große Umwege zum Ziel führen, wenn Du dich ein wenig mit dem Thema beschäftigst.

Sollte irgendetwas unklar oder ein Begriff unbekannt sein, wirst du auf http://de.selfhtml.org/ fündig.

Voraussetzung für die Lösung hier ist, dass die Tabelle schon vorhanden ist. Muss sie erst per JavaScript erstellt werden, wird es deutlich komplizierter.

  • Die Textareas sollten Event-Handler erhalten, die bei Änderung des Inhalts eine Funktion aufruft: onChange=„kopiermal(this.innerHTML, 0);“ bzw. „kopiermal(this.innerHTML, 1);“.

  • Funktionert onChange auf der textarea nicht, durch onKeyUp oder onBlur ersetzen

  • Funktioniert auch das nicht, müssen extra Buttons für die Funktionsaufrufe her und die Textareas über eigene IDs angesteuert werden.

  • Funktioniert innerHTML nicht, durch innerText ersetzen.

  • Die erste Zelle, in die geschrieben werden soll, sollte eine ID erhalten: id=„ausgabe0“.

function kopiermal:

  • erhält den Text als Parameter, und ob die geraden oder ungeraden Zellen beschrieben werden sollen.
  • und ermittelt als erstes mit document.getElementById(‚ausgabe0‘) die erste Ausgabezelle.
  • Sind die geraden Zellen dran, wird mit nextSibling die nächste (zweite) Zelle ausgewählt.
  • Dann kann in einer Schleife mit substr durch den Text gewandert und mit (jeweils doppeltem) nextSibling durch die Tabelle gehüpft werden. Dabei immer schön darauf achten, dass die erste Zelle und jeder nextSibling auch existieren!

Hoffe ich konnte helfen; würde mich mal interessieren, wofür man so etwas braucht.

Gruß, Titus

#19

Hallo Martha!

Ich möchte mir ein javascript mit 2 Formularen
(Textarea) erstellen, wo ich in das erste einen Text eingebe,
dieser in eine Tabelle geschrieben wird, aber die Buchstaben
einzeln z.B. in die Felder 1,3,5 usw. und, wenn eich einen
zweiten Text eingebe, die einzelnen Buchstaben in die Felder
2,4,6 usw. geschrieben werden. Wie mache ich das? Könnten Sie
mir dabei helfen?

Mir ist der Sinn dieses Experimentes noch nicht so ganz klar, aber gehen wir einfach mal davon aus, dass du deine Gründe hast.

Auch verstehe ich den Versuchsaufbau noch nicht so ganz. Handelt es sich um zwei TEXTAREA-Elemente in zwei verschiedenen FORM-Elementen, die auf derselben oder aufeinander folgenden Seiten jeweils dasselbe machen, nämlich die einzelnen Buchstaben in Tabellenzellen einer bereits bestehenden Tabelle (warum Tabelle, wie viele Spalten?) (über-)schreiben oder sollen (INPUT-Felder mitsamt) TD-Zellen mit den entsprechend in den/dem TEXTAREA-Feld(ern) eingegebenen Buchstaben erst dynamisch (hinzu)generiert werden?

Das wäre alles grundsätzlich machbar und ich könnte dir sicherlich auch dabei helfen. Wenn wir das Experiment aber möglichst schlank halten könnten, so wäre mir das lieb.

Gruß Gernot

#20

Sehr geehrte Frau Beng,

aus zeitlichen Gründen war es mir bisher nicht möglich auf Ihre Anfrage zu antworten.
Wurde die Problemstellung mittlerweile geklärt, oder ist noch Unterstützung notwendig?

Viele Grüße,

Michael Kaupp