nicht angemeldet
Lieber Justin,
Du musst Dir über eines klar werden. Der Browser erzeugt nach dem Laden der Seite aus dem Quelltext einen Objektbaum (DOM). Wenn Du vor diesem Vorgang Änderungen am Quelltext vornehmen möchtest, dann kannst Du das mit document.write() oder document.writeln() tun. Wenn Du allerdings nach diesem Vorgang Änderungen vornehmen möchtest, dann musst Du Änderungen am Objektbaum selbst vornehmen. Dazu benötigst Du passende Methoden wie <ElementObjekt>.http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild() oder <ElementObjekt>.http://de.selfhtml.org/javascript/objekte/node.htm#insert_before@title=insertBefore().
Da Du auf Benutzereingaben hin etwas tun (lassen) willst, wirst Du nicht umhin kommen, diese DOM-Methoden zu studieren und damit Deine Tabelle "live" zu erzeugen und zu befüllen.
Ich schlage Dir folgendes Vorgehen vor:
<form action="" id="potenzrechner">
<p>
<label for="anzahl">Anzahl der Potenzen: </label>
<input name="anzahl" id="anzahl" />
<input type="button" value="Anzeigen" onclick="return ergebnistabelle()"/>
</p>
</form>
Im obigen Beispiel habe ich IDs benutzt, da man damit in JavaScript etwas leichter und schneller auf gewünschte Elemente zugreifen kann. Außerdem bietet es sich an, da das <label>-Element prima mit einer ID zusammenarbeitet (vergiss <label>-Elemente in Formularen nicht!).
Nun kann man das JavaScript schreiben:
function ergebnistabelle (button) {
// jedes <input> kennt sein <form>, also auch der "button"!
var form = button.form;
var max = form.maximum.value;
// numerischen Wert aus String entwickeln
max = Math.abs(max);
// ganzzahligen Wert aus Zahl berechnen
max = Math.floor(Math.abs(max));
// jetzt kann die Ergebnistabelle erzeugt werden
var table, i, tr, td, th, text;
var ueberschriften = ["x", "2^x"];
// steht schon eine Tabelle unterhalb unseres Formulars?
if (form.nextSibling.tagName && form.nextSibling.tagName.toLowerCase() == "table") {
// ja -> diese benutzen
table = form.nextSibling;
} else {
// nein -> neue Tabelle erstellen
table = document.createElement("table");
// und ins Dokument schreiben
form.parentNode.insertBefore(table, form.nextSibling);
}
// Tabelle "leeren"
while (table.firstChild) {
table.removeChild(table.firstChild);
}
// Tabelleninhalte neu aufbauen
tr = table.insertRow(0); // erste Zeile erzeugen
for (i = 0; i < ueberschriften.length; i++) {
text = document.createTextNode(ueberschriften[i]); // Text erzeugen
th = document.createElement("th"); // Tabellenüberschrift erzeugen
th.appendChild(text); // Text in Tabellenüberschrift einfügen
tr.appendChild(th);
}
for (i = 0; i <= max; i++) {
tr = table.insertRow(i + 1); // neue Zeile erzeugen
text = document.createTextNode(i); // Text erzeugen (hier die Potenz)
th = document.createElement("th"); // Tabellenüberschrift erzeugen
th.appendChild(text); // Tabellenüberschrift mit Text befüllen
text = document.createTextNode(Math.pow(2, i)); // Ergebnis-Text
td = document.createElement("td"); // Tabellenzelle erzeugen
td.appendChild(text); // Tabellenzelle mit Ergebnis befüllen
tr.appendChild(th); // Tabellenüberschrift in Tabellenzeile einfügen
tr.appendChild(td); // Ergebniszelle in Tabellenzeile einfügen
}
}
Etwas aufgehübscht sieht das Ganze dann so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Potenzrechner</title>
<script type="text/javascript">//<![CDATA[
function ergebnistabelle (button) {
// jedes <input> kennt sein <form>, also auch der "button"!
var form = button.form;
var max = form.maximum.value;
// numerischen Wert aus String entwickeln
max = Math.abs(max);
// ganzzahligen Wert aus Zahl berechnen
max = Math.floor(Math.abs(max));
// jetzt kann die Ergebnistabelle erzeugt werden
var table, i, tr, td, th, text;
var ueberschriften = ["x", "2^x"];
// steht schon eine Tabelle unterhalb unseres Formulars?
if (form.nextSibling.tagName && form.nextSibling.tagName.toLowerCase() == "table") {
// ja -> diese benutzen
table = form.nextSibling;
} else {
// nein -> neue Tabelle erstellen
table = document.createElement("table");
// und ins Dokument schreiben
form.parentNode.insertBefore(table, form.nextSibling);
}
// Tabelle "leeren"
while (table.firstChild) {
table.removeChild(table.firstChild);
}
// Tabelleninhalte neu aufbauen
tr = table.insertRow(0); // erste Zeile erzeugen
for (i = 0; i < ueberschriften.length; i++) {
text = document.createTextNode(ueberschriften[i]); // Text erzeugen
th = document.createElement("th"); // Tabellenüberschrift erzeugen
th.appendChild(text); // Text in Tabellenüberschrift einfügen
tr.appendChild(th);
}
for (i = 0; i <= max; i++) {
tr = table.insertRow(i + 1); // neue Zeile erzeugen
text = document.createTextNode(i); // Text erzeugen (hier die Potenz)
th = document.createElement("th"); // Tabellenüberschrift erzeugen
th.appendChild(text); // Tabellenüberschrift mit Text befüllen
text = document.createTextNode(Math.pow(2, i)); // Ergebnis-Text
td = document.createElement("td"); // Tabellenzelle erzeugen
td.appendChild(text); // Tabellenzelle mit Ergebnis befüllen
tr.appendChild(th); // Tabellenüberschrift in Tabellenzeile einfügen
tr.appendChild(td); // Ergebniszelle in Tabellenzeile einfügen
}
}
//]]></script>
<style type="text/css">/* <![CDATA[ */
table, th, td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 5px 1em;
}
/* ]]> */</style>
</head>
<body>
<h1>Potenzrechner</h1>
<form action="" id="potenzrechner">
<p>
<label for="maximum">Anzahl der Potenzen: </label>
<input name="maximum" id="maximum" />
<input type="button" value="Anzeigen" onclick="return ergebnistabelle(this)"/>
</p>
</form>
</body>
</html>
Liebe Grüße,
Felix Riesterer.
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)