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

[lucab]

Hi,

ich würde gerne einen Taschrechner als Webseite bauen. Bisher habe ich den folgenden Code, allerdings wird im Ergebnisfeld nichts ausgegeben:

<script>
function Addieren() {
var a = parseInt(form.Zahl1.value);
var b = parseInt(form.Zahl2.value);
var Ergebnis = a + b;
document.getElementById('ergebnis').value = Ergebnis;  
}

function Subtrahieren(){
var a = parseInt(form.Zahl1.value);
var b = parseInt(form.Zahl2.value);
var ergebnis = a - b;
document.getElementById('ergebnis').value = Ergebnis;  
}

function Multiplizieren(){
var a = parseInt(form.Zahl1.value);
var b = parseInt(form.Zahl2.value);
var ergebnis = a * b;
form.Ergebnis.value = ergebnis;
}

function Dividieren(){
var a = parseInt(form.Zahl1.value);
var b = parseInt(form.Zahl2.value);
var ergebnis = a / b;
document.getElementById('ergebnis').value = Ergebnis;  
}

function Potenzieren(){
var a = parseInt(form.Zahl1.value);
var b = parseInt(form.Zahl2.value);
var ergebnis = Math.pow(a, b);
document.getElementById('ergebnis').value = Ergebnis;  
}
</script>

<form name=rechner>
	<input type=text name=Zahl1 size=30>
	<input type=button value="+" onClick="Addieren()"> 
	<input type=button value="-" onClick="Subtrahieren()">
	<input type=button value="*" onClick="Multiplizieren()">
	<input type=button value="/" onClick="Dividieren()">
	<input type=button value="^" onClick="Potenzieren()">
	<input type=text name=Zahl2 size=30>
	=
	<input type=readonly id="ergebnis" name=Ergebnis size=30 >
</form>

Liegt der Fehler vielleicht bei der Zeile: document.getElementById('ergebnis').value = Ergebnis; ?

[Matthias Apsel]

Hallo lucab,

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Taschenrechner

Bis demnächst
Matthias

[dedlfix]

Tach!

Liegt der Fehler vielleicht bei der Zeile: document.getElementById('ergebnis').value = Ergebnis; ?

Groß- und Kleinschreibung bei Variablennamen ist wichtig.

dedlfix.

[lucab]

Danke, das habe ich schonmal korrigiert. Der Debugger im Browser gibt mir die Fehlermeldung, dass form (bei dem Statement var b = parseInt(form.Zahl2.value);) nicht definiert sei. Muss ich die eingegebenen Werte anders aulesen?

[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

[lucab]

Vielen Dank für die ausführliche Antwort, Sie haben mir sehr weitergeholfen! :)

[Rolf B]

Hallo lucab,

gerne.

Aber du bist hier nicht in der Schule. Wir sagen alle „Du“ zueinander - trotz der Tatsache, dass ich vermutlich dein Opa sein könnte 😉

Rolf

[beatovich]

hallo

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.

Ich will nur anfügen, dass das obstrusive hier nicht die js-handler im HTML sind, sondern das HTML an sich!

[Gunnar Bittersmann]

@@Rolf B

      var ergebnis = a + b;
      rechner.ergebnis.value = ergebnis;

Das wird wohl nichts. Das Feld hat zwar id="ergebnis", aber name="Ergebnis"; müsste also mit großem E angesprochen werden.

Besser wäre allerdings, im HTML name="ergebnis" zu schreiben und damit einerseits id und name gleich zu haben und anderseits konsistent Kleinschreibung zu verwenden (es ist ja auch <form name="rechner">).

Ich halte es aber für keine so gute Idee, für Feldnamen und JavaScript-Berechnungsvariable denselben Bezeichner zu verwenden.

Was Du willst, ist entweder das output-Element,

An die Stelle gehört ein Punkt, kein Komma. Ohne „entweder“ …

oder ein <input type="text" readonly ...>

… und „oder“. Für die Ausgabe ist input falsch.

Statt <input type=readonly id="ergebnis" name=Ergebnis size=30 > sollte da stehen: <output id="ergebnis" name="ergebnis"></output> (habe hier ein kleines e verwendet).

Die ID macht sich gut, um das label zuzuordnen, über das auch ein Ausgabefeld verfügen sollte:

<label for="ergebnis">Ergebnis</label>
<output id="ergebnis" name="ergebnis"></output>

Wenn man keine visuelle Beschriftung möchte, kann man sie visuell verstecken.

Das Ausgabefeld kann ebenfalls über document.forms.rechner.ergebnis angesprochen und über document.forms.rechner.ergebnis.value gefüllt werden. Guckst du.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Das wird wohl nichts. Das Feld hat zwar id="ergebnis", aber name="Ergebnis"; müsste also mit großem E angesprochen werden.

Hast eigentlich recht, wird aber trotzdem was. In Chrome und Firefox zumindest - da ist der Zugriff offenbar case-insensitive. Deswegen ist es mir im Fiddle nicht aufgefallen.

Bezüglich output wollte ich Luca nicht zu viel von seinen eigenen Sachen um die Ohren hauen; ich hab ihn einfach drauf hingewiesen. Bei output muss man ja auch eventuell noch über Styling nachdenken.

Dass es bessere Taschenrechner geben kann, wusste er ja schon aus Matthias einleitendem Pointer.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Das wird wohl nichts. Das Feld hat zwar id="ergebnis", aber name="Ergebnis"; müsste also mit großem E angesprochen werden.

Hast eigentlich recht, wird aber trotzdem was. In Chrome und Firefox zumindest

Stimmt.

da ist der Zugriff offenbar case-insensitive.

Nein, da ziehst du den falschen Schluss. document.forms.rechner.ergebnis spricht nicht das Element mit name="Ergebnis" an, sondern das Element mit id="ergebnis" (und das auch nur im Nicht-Strict-Modus). Es ist nur in diesem Fall dasselbe Element.

Bei output muss man ja auch eventuell noch über Styling nachdenken.

Das muss man bei input auch. Wenn man die Ausgabe aussehen lässt wie ein Eingabeelement, dann macht man was falsch.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Nein, da ziehst du den falschen Schluss.

Äh wie jetzt, ich lebte bisher in dem Glauben, dass aus historischen Gründen die ID verwendet wird, um ein Property dieses Namens auf dem Window-Objekt anzulegen. Auf dem Form-Objekt auch? Und der Form-Name erzeugt auch ein window-Property???

<form id="foo" name="Bar">
   <input type="text" id="hui" name="Buh">
</form>

Es gibt: window.foo, window.Bar, window.hui, window.(foo|Bar).hui, window.(foo|Bar).Buh.

Die beiden fetten waren mir neu.

Rolf