JavaScript Taschenrechner

pedasen · 29 Januar 2009

Hallo leute,
ich muss für die Schule einen simplen Taschenrechner (Multiplikation, Division, Addieren, Subtrahieren) mit JavaScript erstellen.
Ich hatte schon angefangen, aber leider liegt dieses Exemplar auf einem Schulrechner...
Ich wollte, dass man in einer Auswahlliste auswählt, was für eine Funktion, Addieren, Subtrahieren..., man haben möchte, und dann in 2 Felder die Werte eingibt und das Ergebnis mit einem Sendebutton in einem 'Alert' ausgegeben wird.
Mit einem 'if'-Befehl müsste dann eine Funktion, Subtrahieren..., ausgewählt werden und das Ergebnis mit einem 'alert'-Befehl ausgespuckt werden.
Wäre echt nett, wenn Ihr mir einen kleinen Quelltext schreiben könntet.
Schönen Abend noch:-)
pedasen

crash · 29 Januar 2009

Aha. Wie wäre es, wenn du den Rechner selbst schreibst und somit etwas lernst?

_Thor_ · 29 Januar 2009

Hier gibt es Codes ohne Ende.

Javascript Taschenrechner

Bastel dir was zusammen, wenn du Fehler hast, stell es online, dann können wir dir sagen, wo die Fehler sind.

Aber fertig schreiben wird dir das sicher keiner.

pedasen · 30 Januar 2009

Hallo,
jo Ihr habt recht, ganz von Euch es machen lassen ist wohl zu einfach.

So, ich bin mit JavaScript überhaupt noch nicht vertraut. Hier erstmal mein vorgefertigter Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script language="JavaScript">
<!--
 function ergebnis() {
      zahl1ImFormular=document.rechner.zahl1.value;
      zahl2ImFormular=document.rechner.zahl2.value;
      ergebnis = ;
      alert("Das ergebnis lautet: " + ergebnis);

 }
//-->
</script>
<noscript></noscript>





<title></title>
<meta name="author" content="user">
<meta name="editor" content="html-editor phase 5">
</head><body alink="#ff0000" bgcolor="#ffffff" text="#000000" vlink="#ff0000" link="#ff0000">

<form name="rechner">
<input size="5" name="zahl1" type="text">
    <select name="art" size="1">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
<input size="5" name="zahl2" type="text">
 <input value="=" onclick="ergebnis()" type="button">
</form>


</body></html>

Ich weiß nicht, wie ich eine 'if'-Funktion einbinde, die der 'ergebnis ()'-Funktion sagt, was es tun soll.

crash · 30 Januar 2009

Du hast da noch einige HTML-Fehler drin. Name ist für <form> schon so lange missbilligt, dass man einfach nicht mehr damit auf Formulare zugreift. Nimm gleich id="" und getElementById().

Ich würde in jedem Fall eval() (missbilligt) und new Function() (langsam) vermeiden, sondern eine Struktur anlegen für die Rechenoperationen:

Code:

var val1 = +input1.value;
var val2 = +input2.value;
var operate = {
   "*" : val1 * val2,
   "/" : val1 / val2,
   "+" : val1 + val2,
   "-" : val1 - val2
}

und dann einfach auswählen:

Code:

if (typeof operate[select.value] != "undefined") {
    input3.value = operate[select.value]
}

Wenn du einen Taschenrechner bauen möchtest, warum sieht er auch nicht wie einer aus?

pedasen · 30 Januar 2009

ach, ich wills nicht übertreiben, wir fangen grade erst damit an, mit javascript zu arbeiten. aber vielen dank!

pedasen · 30 Januar 2009

Hey, also ich habe es jetzt nochmal so versucht:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script language="JavaScript">
<!--
 function ergebnis() {
      var val1 = +input1.value;
      var val2 = +input2.value;
      var operate = {
   "*" : val1 * val2,
   "/" : val1 / val2,
   "+" : val1 + val2,
   "-" : val1 - val2
      alert("Das ergebnis lautet: " + ergebnis);
 }

 if (typeof operate[select.value] != "undefined") {
    input3.value = operate[select.value]
}
//-->
</script>
<noscript></noscript>





<title></title>
<meta name="author" content="user">
<meta name="editor" content="html-editor phase 5">
</head><body alink="#ff0000" bgcolor="#ffffff" text="#000000" vlink="#ff0000" link="#ff0000">

<form id="rechner">
<input size="5" id="input1" type="text">
    <select id="input3" size="1">
      <option>+</option>
      <option>-</option>
      <option>*</option>
      <option>/</option>
    </select>
<input size="5" name="input2" type="text">
 <input value="=" onclick="ergebnis()" type="button">
</form>


</body></html>

Ich weiß nur nicht, wie ich jetzt getElementById() und die JavaScript Codes einfügen muss. Ich hab versucht mich da reinzufuchsen, nur ich weiß nicht, wie der jetzt wissen kann, welche "var operate" der jetzt ausführen soll. Ebenso ist die reihenfolge, die ich gewählt habe, doch recht fraglich...
Mein Lehrer ist, glaub ich zumindest, relativ veraltet. Aber ihr könnt mir ja gut helfen:)

crash · 30 Januar 2009

Nicht einfach sinnlos kopieren. Du musst versuchen zu verstehen, was da passiert. Die Fehlerkonsole sagt dir sicher, dass input1, input2, input3 nicht definiert ist und das eine Klammer fehlt.

So holst du ein Element:

Code:

var input1 = document.getElementById("input1");

Außerdem empfehle ich:

pedasen · 31 Januar 2009

Tut mir leid, wenn es für Dich so leicht erscheint, aber für mich ist die ganze Sache noch sehr neu. Ich versuch ja auch es zu verstehen.

Code:

<!--
 function ergebnis() {
      var val1 = document.getElementById("input1");
      var val2 = document.getElementById("input2");
      var operate = document.getElementById("input3") {
   "*" : val1 * val2,
   "/" : val1 / val2,
   "+" : val1 + val2,
   "-" : val1 - val2
      alert("Das ergebnis lautet: " + ergebnis();
 }

 if (typeof operate[select.value] != "undefined") {
    input3.value = operate[select.value]
}
//-->

Das ist jetzt der JavaScript Code, der bei mir gerade in der html steckt. Also wenn ich jetzt in das Feld 1 etwas schreibe, sollte der das doch jetzt als "val1" ansehen und das mit dem 2ten Feld auch, oder nicht? Bei "operate" ist der Pfad zu der Auswahlliste. Aber wozu brauche ich dann noch einen "if"-Befehl?

crash · 31 Januar 2009

Und was sagt dir die Fehlerkonsole?

pedasen · 31 Januar 2009

Entschuldige, welche Fehlerkonsole? :???:

---EDIT---
Ehhm, ja die Fehlerkonsole von Firefox sagt:

Fehler: missing ; before statement
Quelldatei: file:///C:/Dokumente%20und%20Einstellungen/Jan/Desktop/taschenrechner.Jan.Petersen.html
Zeile: 10, Spalte: 52
Quelltext:
var operate = document.getElementById("input3") {

Also ist irgendwas fehlt wohl vor einer Angabe.

crash · 31 Januar 2009

OK. Also da ist ein Fehler. Schau dir doch an, wie ich es geschrieben habe:

Code:

// eines der Elemente
var input1 = document.getElementById("input1");

Code:

var val1 = +input1.value; // vom ersten Element der Wert
var val2 = +input2.value; // zweites
var operate = {
   "*" : val1 * val2,
   "/" : val1 / val2,
   "+" : val1 + val2,
   "-" : val1 - val2
};

Code:

if (typeof operate[select.value] != "undefined") {
    input3.value = operate[select.value] // wert des dritten setzen
}

pedasen · 31 Januar 2009

Also, ich weiß nicht, wohin was geschrieben werden muss. Ebenso frag ich mich, wohin der Pfad geschrieben wird.

Code:

<!--
 function ergebnis() {
      var val1 = document.getElementById("input1");
      var val2 = document.getElementById("input2");
      var operate = {
   "*" : val1 * val2,
   "/" : val1 / val2,
   "+" : val1 + val2,
   "-" : val1 - val2
   };
      alert("Das ergebnis lautet: " + ergebnis();
 }

 if (typeof operate[select.value] != "undefined") {
    document.getElementById("input3") = operate[select.value]
}
//-->

Ist die Zeichensetzung denn so richtig? Darf der "alert"-Befehl überhaupt unter "var operate" stehen? Und bei der "if"-Funktion weiß ich auch nicht, wohin der Pfad soll. Danke für deine Mühe nä.

crash · 31 Januar 2009

Nein, dass alert() darf nicht innerhalb von {} stehen. Die Syntax von {} ist oberen Links genau beschrieben. Zähl außerdem mal die öffnenden und schließenden Klammern.

pedasen · 31 Januar 2009

Ok, mir ist gerade aufgefallen, dass das "alert" auf die Funktion verweißt, was ja vollkommen unsinnig ist... Wo wird denn nun das Ergebnis ausgegeben? Ich dachte im "operate" oder nicht?
Sind denn die Pfäde so richtig angegeben?

Code:

<!--
 function ergebnis() {
      var val1 = document.getElementById("input1");
      var val2 = document.getElementById("input2");
      var operate = {
          "*" : val1 * val2,
          "/" : val1 / val2,
          "+" : val1 + val2,
          "-" : val1 - val2
      };
      alert("Das ergebnis lautet: " + operate);
 }

 if (typeof operate[select.value] != "undefined") {
    document.getElementById("input3") = operate[select.value]
}
//-->

Oder muss es so:

Code:

<!--
 function ergebnis() {
      var input1 = document.getElementById("input1");
      var input2 = document.getElementById("input2");
      var input3 = document.getElementById("input3");
      var val1 = +input1.value;
      var val2 = +input2.value;
      var operate = {
          "*" : val1 * val2,
          "/" : val1 / val2,
          "+" : val1 + val2,
          "-" : val1 - val2
      };
      alert("Das ergebnis lautet: " + operate);
 }

 if (typeof operate[select.value] != "undefined") {
    input3.value = operate[select.value]
}
//-->

crash · 31 Januar 2009

Letzteres. Jetzt musst du dir nur noch das <select> holen (var select = document.getElementById(...)).

alert("Das ergebnis lautet: " + operate); liefert dir sicher sowas wie "objekt".

pedasen · 1 Februar 2009

Ja genau, der Alert sag "Das ergebnis lautet: [object Objekt]".
Was müsste denn hinter "alert("Das ergebnis lautet: " + "?
Was ist denn dieses "select"?

crash · 1 Februar 2009

Code:

operate[select.value]

Damit holt er sich, abhängig der Wertes des Selects, das bereits berechnete Ergebnis aus dem generische Objekt operate. Mit der IF davor wird nur geprüft, ob die Rechenoperationen bekannt ist.

pedasen · 1 Februar 2009

Das bringt mich irgendwie nicht weiter.

crash · 1 Februar 2009

Code:

<select name="art" size="1">

Holen und dir mal den Wert mit alert() ausgeben.

JavaScript Taschenrechner

Neues Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied