Im Javacript Text aus input type text auslesen und verwenden von Beat, 10.09.2010 14:43

Im Javacript Text aus input type text auslesen und verwenden

Justin 10.09.2010 14:24

javascript

Hallo zusammen

Nach der ersten Lektion in JS sollen wir bereits ziemliche Aufgaben erfüllen. Bin jetzt schon 2h im Geschäft dabei und komm jetzt einfach nicht mehr weiter.

Mein Ziel ist es, dass ich die Anzahl Potenzen im Input Text angeben kann und im JS wieder als var max für die Schleife verwenden kann. Leider gibt mir die Fehlerkonsole immer undefined document.input_text an. was mache ich falsch und könnte ich den code noch mehr optimieren?

besten dank im voraus

<html>  
  <head>  
    <title>2-er Potenzen mit JavaScript</title>  
  
  
    <script language="javascript">  
      function zweierpotenz (wert) {  
        return Math.pow(2,wert) ;  
      } ;  
    </script>  
  
	</head>  
	<body>  
	<form action="input_text">  
	<input type="text" name="anzahlpotenzen"/>  
	<input type="button" name="anzeige" value="Anzeigen" onClick="AnzeigenErgebnis()"/>  
	</form>  
  
    <table border="1mm">  
      <th>x</th><th>2**x</th>  
	  	<script type="text/javascript">  
		function AnzeigenErgebnis() {  
		var max = document.input_text.anzahlpotenzen.value;  
          for (var i =0; i <= max; i++) {  
            out = "<tr><td>" + i + "</td><td>" + zweierpotenz(i)+ "</td></tr>"  
            document.write(out) ;  
          }  
		}  
    </script>  
  
    </table>  
  </body>  
<html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Im Javacript Text aus input type text auslesen und verwenden

Felix Riesterer Homepage des Autors 10.09.2010 14:42

javascript

+1 Informationen zu den Bewertungsregeln

Lieber Justin,

var max = document.input_text.anzahlpotenzen.value;

Du verwendest eine "Eigenschaft" des Objektes "document", die nicht existiert. Was soll "document.input_text" denn sein?

Was Du anscheinend noch nicht weißt: Im Document-Objekt gibt es ein Unterobjekt namens document.forms, in welchem auch Dein Formular enthalten ist. Wahrscheinlich ist Dein Formular das einzige Formular in Deinem Dokument, sodass Du mit document.forms[0] auf das Element-Objekt, welches sich hinter <form...> versteckt, zugreifen kannst.

var max = document.forms[0].input_text.anzahlpotenzen.value;

Ist Dir die Hierarchie der Objekte verständlicher geworden?

Dein nächstes Problem ist dieser Abschnitt:

out = "<tr><td>" + i + "</td><td>" + zweierpotenz(i)+ "</td></tr>"
document.write(out) ;

1.) "out" ist eine globale Variable, da Du das Schlüsselwort "var" nicht davor stehen hast (innerhalb der Schleife ist das auch nicht korrekt, da Du die Variable _voerher_ initialisieren musst). Globale Variablen (sprich "Eigenschaften des window-Objektes") will man vermeiden.

2.) Die Anweisung document.write() bewirkt beim Laden der Seite, dass Inhalte an der Stelle des <script>-Elements ins Dokument geschrieben werden. Wenn allerdings das Laden der Seite abgeschlossen ist (Dein onclick-Event geschieht ja wohl nach dem Laden, oder nicht?), bewirkt diese Methode, dass das gegenwärtige Dokument komplett(!) durch den auszugebenden Inhalt ersetzt wird. Und das willst Du ja nicht, oder?

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

Beitrag melden

+1 Informationen zu den Bewertungsregeln

Im Javacript Text aus input type text auslesen und verwenden

Justin 11.09.2010 12:27

javascript

– Informationen zu den Bewertungsregeln

Hallo zusammen

Danke für die Hilfe. Bin mal ein Schritt weiter. Ich wusste nicht dass die Hierarchie über "name" funktioniert. Habe der Form nun den Namen
<form action="input_text" name="anzformular">
gegeben.
Danach die var max = document.anzformular.anzahlpotenzen.value; gegeben

Jetzt funktioniert die Berechnung, leider werden die Zahlen aber in einem String ausgegeben bzw. sieht aus wie einem. Beispiel:
01122438416532664712882569512101024112048
Ich habe versucht das erstellen der Tabelle in das Script zu nehmen, aber danach funktioniert gar nichts mehr. Ist dies überhaupt möglich oder muss ich anders vorgehen dass alles wieder in der Tabelle erscheint?

Danke und Gruss

Justin

Beitrag melden

– Informationen zu den Bewertungsregeln

Im Javacript Text aus input type text auslesen und verwenden

Felix Riesterer Homepage des Autors 11.09.2010 14:48

javascript

– Informationen zu den Bewertungsregeln

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:)

Beitrag melden

– Informationen zu den Bewertungsregeln

Im Javacript Text aus input type text auslesen und verwenden
ChrisB 10.09.2010 14:42

javascript
– Informationen zu den Bewertungsregeln
Hi,

Leider gibt mir die Fehlerkonsole immer undefined document.input_text an. was mache ich falsch

Die von dir gewählte Schreibweise soll über den Namen des Formulars auf dieses zugreifen.

Hat dein Formular einen Namen? Nein.

MfG ChrisB

--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Beitrag melden

–
Informationen zu den Bewertungsregeln
Im Javacript Text aus input type text auslesen und verwenden
Beat Homepage des Autors 10.09.2010 14:43

javascript
– Informationen zu den Bewertungsregeln
<form action="input_text">
<input type="text" name="anzahlpotenzen"/>
<input type="button" name="anzeige" value="Anzeigen" onClick="AnzeigenErgebnis()"/>
</form>
```
  var max = document.input\_text.anzahlpotenzen.value;  
```
___________________________________^

Woher soll das kommen?
Ich finde nirgendwo ein name="input_text"

mfg Beat

--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Justin: Im Javacript Text aus input type text auslesen und verwenden

Im Javacript Text aus input type text auslesen und verwenden

Im Javacript Text aus input type text auslesen und verwenden

Im Javacript Text aus input type text auslesen und verwenden

Im Javacript Text aus input type text auslesen und verwenden

Im Javacript Text aus input type text auslesen und verwenden

Im Javacript Text aus input type text auslesen und verwenden

Im Javacript Text aus input type text auslesen und verwenden