Javascript - simpler Taschenrechner

F

fpotnie

Grünschnabel
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.



Code: 
<!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>
 
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:
Code: 
    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
 
So funktionierts:

Javascript: 
<!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()!!
 
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?
 
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.
 
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
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück