Manfred-BW: Eingabeformular und Ausgabetabelle zusammen mit JS erzeugen

Beitrag lesen

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>