Lern-Fabrik

Erstellung eines einfachen Additionsrechners mit HTML und JavaScript

Dieser Abschnitt soll Schritt für Schritt zeigen, wie ein einfacher Additionsrechner mit HTML und JavaScript erstellt werden kann.

Additionsrechner

Summand 1:

Summand 2:


Hier kommt das Ergebnis der Addition von Summand1 und Summand2....

Schritt für Schritt - Anleitung

Schritt 1: HTML-Grundstruktur

  • Erstelle eine HTML-Datei mit einer grundlegenden Struktur. Diese dient als Grundgerüst für den Additionsrechner.
  • Visual Code Studio öffnen, auf neue Datei "anklicken", dann Datei speichern unter "anklicken" und als Dateinamen: addition.html eingeben.
  • Anschließend gebe ein Semikolon (!) ein und "drücke" auf auf "Enter".


Schritt 2: HTML-IDs und Inputboxen

  • Erstelle die beiden benötigten Inputboxen (für Eingabe Summand1 und Summand2), Button und einen div-Element für die Ausgabe.
  • Benenne den div-Element in "idausgabe" und verbinde gleichzeitig den Button mit dem Namen "Berechne Summe!" mit der Funktion fAddition().


Exkurs: HTML-IDs und JavaScript-Variablen

  • Verwendungszweck: HTML-IDs sind Bezeichner, die in HTML-Dokumenten verwendet werden, um ein bestimmtes HTML-Element eindeutig zu identifizieren. Sie dienen dazu, bestimmte Elemente auf der Webseite auszuwählen und bspw. mit JavaScript zu bearbeiten.
  • Syntax: In HTML wird eine ID einem HTML-Element mithilfe des id-Attributs zugewiesen.
  • Zugriff in JavaScript: Um auf ein HTML-Element mit einer bestimmten ID in JavaScript zuzugreifen, verwende die getElementById()-Methode, wie folgt:


  • Einmalige Identifizierung: IDs sollten in einem HTML-Dokument eindeutig sein. Das bedeutet, dass kein anderes Element dieselbe ID haben darf.

Schritt 3: Hinzufügen des JavaScript-Teils zwischen den beiden <script> ... </script> -Tags

  • Erstelle die Funktion fAddition().
  • Erstelle die benötigten JavaScript-Variablen vSummand1 und vSummand2, verbinde diese mit den beiden Inputboxen-IDs.
  • Die Funktion parseFloat() wandelt eine zu übergebende Zeichenkette in eine Zahl um und gibt diese als numerischen Wert zurück.
  • Erstelle die Ausgabe mit der Variablen vAusgabe.
  • Das Ergebnis soll dem erstellten div-Element "idausgabe" zugewiesen werden.


Schritt 4: Verstehen der Code-Erklärung

  • In der HTML-Struktur haben wir zwei Eingabefelder (input) für die beiden Zahlen (Summand1, Summand2), einen Button zum Auslösen der Berechnung und ein leeres divElement, in dem das Ergebnis angezeigt wird.
  • Die JavaScript-Funktion fAddition() wird beim "Klicken" auf den Button aufgerufen.
  • In der Funktion werden die Werte der beiden Eingabefelder (idSummand1 und idSummand2) mit parseFloat() in Fließkommazahlen umgewandelt.
  • Die Addition der beiden Zahlen erfolgt in der Zeile 19:
  • var vSumme = vSummand1 + vSummand2;
  • Das Ergebnis wird dann in das div-Element mit der ID "idausgabe" eingefügt, um es anzuzeigen.

Schritt 5: Teste das Programm

  • Speichere die HTML-Datei und öffnen sie in einem Webbrowser.
  • Gebe zwei Zahlen in die Eingabefelder ein und „Klicke“ auf den "Berechne Summe!"- Button, um das Ergebnis zu sehen.