Eingabeformular und Ausgabetabelle zusammen mit JS erzeugen
0 0 
molily
Eingabeformular und Ausgabetabelle zusammen mit JS erzeugen
Variableneingabeformular und Tabellenausgabe komplett mit Javascript erzeugen.
Ich habe folgende Idee:
Damit mir meine berechneten Tabellenwerte beim anzeigen nicht
meine Tabelle mit den Eingabewerten überschreiben, erzeuge ich das Eingabe-
formular komplett jedesmal neu zusammen mit den Eingabewerten und mit der Ergebnistabelle mittels Javascript.
Dies funktioniert mit untenstehendem Beispiel teilweise auch ganz gut in
Firefox. Im IE muß ich noch Fehlermeldungen wegklicken.
Aber ich kann die Funktion nicht aus sich selbst heraus aufrufen.
Wer modifiziert mir das Beispiel so, daß beim klicken auf die Schaltflächen
die Berechnung der Zufallszahlen und die Anzeige
der Tabelle mit den Eingabewerten neu erfolgt?
(Das sogenannte Affenformular mit welchem man eine Funktion aus sich
selbst heraus aufruft habe ich bis jetzt nur mit PHP und nicht mit
Javascript gefunden).
Ich habe für das Beispiel die Variablen nicht aus dem Formular geholt, sondern fest definiert.
Wie holt man die Variablenwerte aus dem aktuell angezeigten
Formular bei der Neuberechnung von Zufallszahlen?
Danke für Eure Hilfe, Manfred-BW
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML>
<HEAD>
<TITLE>Formular und Tabelle mittels JavaScript schreiben</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFE0" onload="schreiben()">
</BODY>
</HTML>
<!-- Ende des HTML Codes mit Aufruf der JS Funktion schreiben() -->
<script language="JavaScript" >
function schreiben() {
var htmlText="";
htmlText += "<html><head>"
htmlText += " <form action='#' name='Random'>"
htmlText += "<div align='center'>"
htmlText += "<h2>"
htmlText += "<align='center'>Random Number Generator"
htmlText += "<br>"
htmlText += "<p> <font size=2>"
htmlText += "Lines of numbers to generate:"
htmlText += "<input type='text/javascript' name='NumbersToGenerate' size='2' onfocus='this.value = ' ' value='9' />"
htmlText += "<br>"
htmlText += "<input type='text/javascript' name='Min1' size='2' onfocus='this.value = ' ' value='10' /> = Min1 "
htmlText += "<input type='text/javascript' name='Max1' size='2' onfocus='this.value = ' ' value='20' /> = Max1 ...... range for the first numbers"
htmlText += "<br>"
htmlText += "<br>"
htmlText += "<input type='text/javascript' name='Min2' size='2' onfocus='this.value = ' ' value='30' /> = Min2 "
htmlText += "<input type='text/javascript' name='Max2' size='2' onfocus='this.value = ' ' value='40' /> = Max2 ... range for the second numbers"
htmlText += "<br>"
htmlText += "</font></p>"
htmlText += "</center>"
htmlText += "</div>"
htmlText += "</form>"
htmlText += "<title>Tabelle</title>"
htmlText += "</head>"
htmlText += "<body bgcolor=#FFFFE0 text=#000000>"
htmlText += "<div align="center"><center>"
htmlText +="<FONT COLOR=red SIZE=+2>Tabelle der Zufallszahlen</FONT>"
htmlText += "<P><TABLE width=100 border=1 cellpadding=1 cellspacing=0 bordercolor=#CCCCCC>"
// folgende Variablen sollen aber aus dem Formular geholt werden
var bl=9
var min1=10
var max1=20
var min2=30
var max2=40
// Berechnung der Zufallszahlen
for (var i=0; i<=bl; i++)
{
var x1=Math.floor(Math.random() * (max1 - min1 + 1)) + min1;
var x2=Math.floor(Math.random() * (max2 - min2 + 1)) + min2;
htmlText += "<TR>"
htmlText += "<TD>"
htmlText +="<P ALIGN=right>"
// an 1. Stelle x1 eintragen
htmlText +=x1;
htmlText += "</TD>"
htmlText += "<TD>"
htmlText +="<P ALIGN=right>"
//an 2.Stelle x2 eintragen
htmlText +=x2;
htmlText += "</TD>"
// in neue Zeile gehen
htmlText += "</TR>"
} // Ende for....
//Ende der bl Zeilen
htmlText += "<input type='button' name='Tabelle' value='Neue Zufallszahlen' onClick='schreiben()'>"
htmlText += "</table>"
htmlText += "</body></html>"
// öffne das Dokument und Schreibe die Tabelle rein
document.open();
document.write(htmlText);
document.close();
htmlText += "<INPUT TYPE='button' VALUE='Generate New Numbers' onClick='schreiben()'>"
document.open();
document.write(htmlText);
document.close();
} // Ende Funktion Schreiben()
</SCRIPT>
-
Erst einmal ist das erzeugte HTML nicht gerade valide (<form> innerhalb <head> ist nicht zulässig).
Dein Problem rührt eher daher,d ass du per document.write das vorhandene Dokument komplett löschst und ein neues erzeugst. Dies kennt keine Funktion schreiben(), denn die gibt's nur im alten.
-
Damit mir meine berechneten Tabellenwerte beim anzeigen nicht
meine Tabelle mit den Eingabewerten überschreiben,Anscheinend kennst du nur document.open/write/close, um das Dokument zu modifizieren. Damit kannst du deine Aufgabe nicht lösen, verzichte gänzlich darauf. Schreibe das Formular ganz normal ins Dokument, ohne JavaScript.
Beim Absenden (submit) des Formulars rufst du eine Funktion auf, die die Ausgabe generiert und dann in ein bereitstehendes leeres Element mittels innerHTML schreibt:
document.getElementById("elementmitid").innerHTML = "HTML-Code";
Wie holt man die Variablenwerte aus dem aktuell angezeigten
Formular bei der Neuberechnung von Zufallszahlen?Wie du auf Formularelemente und dessen Werte zugreifst, kannst du hier nachlesen:
http://de.selfhtml.org/javascript/objekte/elements.htmMathias
-
Danke für Eure Antworten.
Mal sehen was ich daraus machen kann.
Manfred-BW
-