NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Tutorial kleiner Javascript-Rechner

Zunächst habe ich dieses Skript in die HTML meines Layouts kopiert.

> Layout markieren > Button “HTML” > “Zwischen Head Tags” einfügen

<script type="text/javascript">
<!--
function calculate ()
{
var wert1 = parseFloat(document.getElementById('feld1').value);
var wert2 = parseFloat(document.getElementById('feld2').value);
var wert3 = parseFloat(document.getElementById('feld3').value);
var wert4 = parseFloat(document.getElementById('feld4').value);
var wert5 = parseFloat(document.getElementById('feld5').value);
var wert6 = parseFloat(document.getElementById('feld6').value);
var wert7 = parseFloat(document.getElementById('feld7').value);
var wert8 = parseFloat(document.getElementById('feld8').value);

var erg1 = wert1 * wert2;
var erg2 = wert3 / wert4;
var erg3 = wert5 + wert6;
var erg4 = wert7 - wert8;


var summe = erg1 + erg2 + erg3 + erg4;

document.getElementById('erg1').innerHTML = erg1.toFixed(2);
document.getElementById('erg2').innerHTML = erg2.toFixed(2);
document.getElementById('erg3').innerHTML = erg3.toFixed(2);
document.getElementById('erg4').innerHTML = erg4.toFixed(2);

document.getElementById('sum').innerHTML = summe.toFixed(2);
}
//-->
</script>

... dabei werden oben die Variablen wert1 bis wert8 gesetzt, die sich auf meine Eingabefelder feld1 bis feld8 beziehen. Ich habe hier die vier Rechenarten

  • multiplizieren
  • dividieren
  • addieren
  • subtrahieren

verwendet, für die als Ergebnis die Variablen erg1 bis erg4 erstellt wurden. Jedes meiner Felder muss also eine eindeutige ID bekommen, damit der Befehl getElementById auf diese Objekte zugreifen kann. Mit dem Befehl “toFixed(2)” habe ich die Nachkommastellen auf 2 gerundet.

Hier eine Ansicht meines ersten Eingabefeldes “feld1”, das ich auch “feld1” genannt habe ...

Bitte stellt Eure Arbeitsfläche auf “Fortgeschritten”, damit Ihr auch unten rechts den Reiter <input> verwenden könnt und kontrolliert dort die Werte bei den Feldern “name” und “id”, dort muss jeweils “feld1” stehen. Wenn Ihr vorgegeben Werte eintragen wollt, dann tut das hier bei “value”.

> Menü > Ansicht > Arbeitsfläche > Fortgeschritten

Bei den anderen Eingabefeldern geht Ihr ebenso vor, nur verwendet Ihr dann natürlich entsprechend “feld2”, “feld3”, usw.

Für das errechnete Ergebnis der verschiedenen Rechenarten habe ich mir Textfelder aufgezogen und in den “HTML-Code Editor” die ID für das im Skript errechnete Ergebnis eingetragen, hier als Beispiel “erg1”. Bei den anderen Ergebnis-Feldern natürlich dann “erg2”, “erg3”, usw.

> Textfeld aufziehen (Cursor blinkt) > Button “Textfeld” > Button “HTML” > und in den HTML-Code Editor eintragen:

<span id=’erg1’></span>

Ebenso habe ich mir für die Summe ein Textfeld aufgezogen und dort auf die ID “sum” verwiesen.

<span id=’sum’></span>

nach oben

Viel Spaß!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik