Wie Ergebnis einer Javascript-Methode in einem HTML-Textfeld ausgeben?

[Rolf B]

(Beitrag editiert - Gunnars Hinweis auf Schreibfehler berücksichtigt)

Hallo dedlfix,

das auch, aber das Script geht schon vorher kaputt.

Hallo Luca,

Es gibt keine Variable form. An das Form kommt man mit document.forms.rechner heran. Deine Funktionen müssten diesem Muster folgen:

function Addieren() {
   var a = parseInt(document.forms.rechner.Zahl1.value);
   var b = parseInt(document.forms.rechner.Zahl2.value);
   var ergebnis = a + b;
   document.getElementById("ergebnis").value = ergebnis;
}

Aber stopp - das ist weder schön, noch gut gemacht. Es gibt eine Menge Techniken, um JavaScript eleganter einzusetzen, aber die will ich jetzt nicht alle vorstellen. Mir scheint, du steigst gerade ein.

Ich empfehle Dir für den Anfang folgende Verbesserungen:

• Verwende Anführungszeichen bei HTML Attributen. Das ist zwar für normales HTML keine absolute Pflicht, aber es gibt auch Attributangaben mit Leerstellen drin, da sind die Anführungszeichen nötig. Es ist einfach üblich, sie zu setzen.
• Verschiebe den Script-Block hinter das Form. Grund: Dann existieren die Form-Elemente bereits und man kann das Form in einer Variablen speichern
• Diese Variable kannst Du dann beim Auslesen der Werte a und b einsetzen.
• Diese Variable kannst Du auch beim Schreiben des Ergebnisses benutzen, dein Ergebnisfeld ist ein input-Element und daher auch im Form zu finden
• Ein <input type=readonly ...> gibt es nicht. Was Du willst, ist entweder das output-Element, oder ein <input type="text" readonly ...>

Dein Script kann dann - HINTER dem Form platziert - so aussehen:

<script>
   var rechner = document.forms.rechner;

   function Addieren() {
      var a = parseInt(rechner.Zahl1.value);
      var b = parseInt(rechner.Zahl2.value);
      var ergebnis = a + b;
      rechner.Ergebnis.value = ergebnis;
   }
   // etc
}
</script>

Vor dem Form funktioniert das nicht. Der Browser muss erst das Form im HTML gefunden haben, bevor es document.forms.rechner gibt.

Aber schön ist das auch nicht, dieser Code verletzt zwei wichtige Prinzipien. Zum einen: „DRY“ - oder "Don't repeat yourself". Das andere ist: Mülle den globalen Namensraum nicht zu - aber um das zu lösen, brauchst Du noch ein paar Vorkenntnisse mehr, das stellen wir zurück.

Für das DRY-Problem kannst Du ein besonderes Feature von JavaScript einsetzen: Funktionen sind Objekte, man kann sie als Parameter an andere Funktionen übergeben. Was wäre, wenn deine Rechen-Funktionen so aussehen könnten:

   function Addieren()       { Berechne( (x, y) => x + y ); }
   function Subtrahieren()   { Berechne( (x, y) => x - y ); }
   function Multiplizieren() { Berechne( (x, y) => x * y ); }
   function Dividieren()     { Berechne( (x, y) => x / y ); }

   function Berechne(ausdruck) {
      var a = parseInt(rechner.Zahl1.value);
      var b = parseInt(rechner.Zahl2.value);
      var ergebnis = ausdruck(a, b);
      rechner.Ergebnis.value = ergebnis;
   }

Das, was da als Parameter an Berechne übergeben wird, ist eine sogenannte Pfeilfunktion (auch Lambda-Funktion genannt). (x,y)=>x+y ist eine Kurzform für eine so genannte anonyme Funktion in dieser Form:

function(x, y) {
   return x + y; 
}

wobei die Unterschiede zwischen den beiden noch etwas weiter gehen als die kürzere Schreibweise, aber das führt hier zu weit.

Wie Du in der dritten Zeile von Berechne siehst, kann man das so übergebene Funktionsobjekt genau wie eine andere Funktion aufrufen.

Du könntest dann sogar so weit gehen, das direkt ins Form zu schreiben:

<form name="rechner">
	<input type="text" name="Zahl1" size="30">
	<input type="button" value="+" onClick="Berechne((x,y)=>x+y)"> 
	<input type="button" value="-" onClick="Berechne((x,y)=>x-y)">
	<input type="button" value="*" onClick="Berechne((x,y)=>x*y)">
	<input type="button" value="/" onClick="Berechne((x,y)=>x/y)">
	<input type="button" value="^" onClick="Berechne((x,y)=>Math.pow(x,y))">
	<input type="text" name="Zahl2" size="30">
	=
	<input type="text" readonly id="ergebnis" name="Ergebnis" size=30 >
</form>

Aber an der Stelle solltest Du stoppen, es ist nämlich nicht Sinn der Sache, sein halbes JavaScript im HTML unterzubringen. Statt dessen verfolgt man die Idee des „unobtrusive“ oder „unaufdringlichen“ JavaScript - aber darauf gehe ich lieber erst ein, wenn Du bis hier folgen konntest und wolltest 😀. Bei Interesse: Schau mal hier hinein.

Rolf