# Javascript - simpler Taschenrechner



## fpotnie (9. Dezember 2013)

Moin moin, ich muss einen Taschenrechner erstellen, der aus aus zwei Eingabefeldern und einem Auswahlmenü für die vier Grundrechenarten besteht. Bis jetzt habe ich folgenden Code zusammengebastelt, der aber leider nicht funktoniert. Hat jemand vllt Tipps, Ideen oder Anleitungen, die mir weiterhelfen könnten?
Ich hab im Netz schon gesucht, leider sind alle programierten Taschenrechner wesentlich komplexer, als die Aufgabe es fordert.




```
<!DOCTYPE HTML SYSTEM>
<html>
	<head>
		<title>taschenrechner</title> 
		<meta name="description" content="Taschenrechner">
		<link rel="stylesheet" type="text/css" href="meinestyles.css">

<script type="text/javascript">
<!--
function calculate ()
{
  var wert1 = document.getElementById('ziffer1').value;
  var wert2 = document.getElementById('ziffer2').value;
  var select = document.getElementById('rb').value;
  var summe = wert1 select wert2


  

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


</head>

	<body>
  	<p><br><input type='text' id='ziffer1' onKeyUp='calculate()' size="5" maxlength="5">
	<select size="1" name="rb" id='rb'>
          <option value="+" selected="selected">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
	<input type='text' id='ziffer2' onKeyUp='calculate()' size="5" maxlength="5">

<input type="submit" value="=">
<span id='sum'></span>
 
		
	</body>
</html>
```


----------



## MCoder (9. Dezember 2013)

Hallo,

ich bin jetzt nicht der große JavaScript-Experte, kann aber soviel sagen, dass die eingegeben Strings in Zahlen gewandelt werden müssen. Die Berechnung des Ergebnisses kann auch nicht so funktionieren, wie du's aufgeschrieben hast.

So sollte bei der Addition ein Ergebnis herauskommen:

```
function calculate()
    {
        var wert1  = parseInt(document.getElementById('ziffer1').value, 10);
        var wert2  = parseInt(document.getElementById('ziffer2').value, 10);
        var select = document.getElementById('rb').value;
        
        if( select == "+" )
        {
            var summe = wert1 + wert2
        }
     
        document.getElementById('sum').innerHTML = summe;
    }
```
Gruß
MCoder


----------



## ikosaeder (9. Dezember 2013)

So funktionierts:


```
<!DOCTYPE HTML>
<html>
    <head>
        <title>taschenrechner</title> 
        <meta name="description" content="Taschenrechner">
<script type="text/javascript">
function calc()
{
  var wert1 = document.getElementById('ziffer1').value;
  console.log(wert1);
  var wert2 = document.getElementById('ziffer2').value;
  console.log(wert2);
  var select = document.getElementById('rb').value;
console.log(select);
  var summe = eval(wert1 + select + wert2)
  console.log(summe);
  document.getElementById('sum').value = summe;
}
</script>
</head>
 
    <body>
<form name="calC">
   
        <input type='text' id='ziffer1' size="5" maxlength="5">
    <select size="1" name="rb" id='rb'>
          <option value="+" selected="selected">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
        </select>
    <input type='text' id='ziffer2' size="5" maxlength="5">
   <input type="button" name="Submit" value="=" onclick="calc();">
<input type='text' id='sum'>
 </form>
     </body>
</html>
```

Vorsicht beim Gebrauch von eval()!!


----------



## fpotnie (9. Dezember 2013)

Danke für die beiden fixen Antworten. Darauf kann man gut aufbauen.
Eine frage hätte ich da aber noch: Warum soll man bei dem Gebrauch von eval() vorsichtig sein?


----------



## jeipack (9. Dezember 2013)

Weil alles was nun in ziffer1 oder ziffer2 eingefügt wird ausgeführt wird. Sprich da kann man alles mögliche an JS einbinden.

In diesem Fall sehe ich aber keine Probleme (Bitte berichtigt mich wenn ich falsch liege - will ja was lernen 
Überhaupt sehe ich kein Problem wenn ein User seinen eigenen Input mit eval() ausführen kann. Javascript Code kann ich ja auch über die Adresszeile: javacript:alert("Hello World"); oder über die Console auf der entsprechenden Seite ausführen.


----------



## ikosaeder (9. Dezember 2013)

Zu eval:
http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea

In deinem Fall sollte es relativ sicher sein. Man kann vielleicht den Input mit IsNumeric() überprüfen um sicher zu gehen. Dann können wirklich nur Zahlen eingegeben werden.

Wenn es für eine Hausaufgabe oder ähnliches ist, kannst du es problemlos verwenden. Für eine echte Webseite würde ich den Input in jedem Fall checken.
Hier gibt es noch einen einfachen Taschenrechner mit Überprüfung der Eingabe:
http://de.selfhtml.org/javascript/beispiele/taschenrechner.htm


----------



## Netzwerkidi (9. Dezember 2013)

https://www.google.de/search?q=taschenrecher+javascript

z. B.
http://de.selfhtml.org/javascript/beispiele/taschenrechner.htm


----------

