Taschenrechner JavaScript
0 
dedlfix
0 Felix Riesterer
0 
MudGuard
2 dedlfix
0 Felix Riesterer
Taschenrechner JavaScript
Matthias ApselHallo,
ich habe versucht, einen Taschenrechner in JavaScript zu programmieren. Dazu habe ich mir Hilfe aus der Wiki geholt. Leider funktioniert alles bis auf die Berechnung. Kann mir vllt jemand weiterhelfen?
<head>
<title>Taschenrechner</title>
<style type="text/css">
h1 {
color: #000000;
}
</style>
<script type="text/javascript">
function Rechner () {
var zahl1;
var zahl2;
var ergebnis;
if(operator == "+") {
ergebnis = zahl1 - -zahl2;
}
if(operator == "-") {
ergebnis = zahl1 - zahl2;
}
if(operator == "*") {
ergebnis = zahl1 * zahl2;
}
if(operator == "/") {
ergebnis = zahl1 / zahl2;
}
window.onload = function () {
document.getElementById('rechnen').onclick = Rechner;
}
}
document.getElementById('ergebnis').value = ergebnis;
</script>
</head>
<body onload="Rechner()">
<h1>Taschenrechner</h1>
<form>
<p>
<label for="zahl1">erste Zahl:
<input id="zahl1" type="number" value="0">
</label>
</p>
<p>
<label for="operator">Operator:
<input id="operator" type="text">
</label>
<p>
<button type="button" id="plus">+</button>
<button type="button" id="minus">-</button>
<button type="button" id="mal">*</button>
<button type="button" id="durch">/</button>
</p>
<p>
<label for="zahl2">zweite Zahl:
<input id="zahl2" type="number" value="0">
</label>
</p>
<br>
<p><button type="button" id="rechnen">Berechnen</button></p>
<label>
Ergebnis:
<output id="ergebnis"></output>
</label>
</form>
</body>
-
Tach!
ich habe versucht, einen Taschenrechner in JavaScript zu programmieren. Dazu habe ich mir Hilfe aus der Wiki geholt. Leider funktioniert alles bis auf die Berechnung. Kann mir vllt jemand weiterhelfen?
Beschreibe bitte, was konkret nicht funktioniert. Am besten hast du das bereits mit den Enwicklertools des Browsers soweit untersucht, dass du die konkrete Stelle nennen kannst, sowie was du dort erwartest und was stattdessen passiert. Die Entwicklertools haben einen eingebauten Debugger, mit dem du deinen Javascript-Code schrittweise ausführen und kontrollieren kannst.
dedlfix.
-
Hallo,
beim Ergebnis wird generell keine Zahl angezeigt. Das heißt, es wird irgendwo an der Ausgabe haken. Ursprünglich wollte ich die Rechenoperationen durch die Buttons steuern, dann erschien mir die Variante mit dem Textfeld aber einfacher. Die Buttons können also ignoriert werden.
-
Tach!
beim Ergebnis wird generell keine Zahl angezeigt. Das heißt, es wird irgendwo an der Ausgabe haken.
Ja, und nun musst du weitergehend untersuchen. Warum kommt die Ausgabe nicht? Wird sie denn wenigstens berechnet oder kommt die Ausführung gar nicht dort an? Nutze die Entwicklerools, setz einen Breakpoint in die Funktion Rechner und schau, ob der angesprungen wird, und wenn ja, was dann weiter passiert. Alternativ dazu kannst du auch mit console.log(...) Ausgaben in der der Console erzeugen, und so sehen, ob der Code dort vorbeikommt. Aber die Sache mit den Breakpoints ist komfortabler.
Du wirst noch oft in Situationen kommen, in denen nicht das passiert, was du möchtest. Deswegen ist das grad eine gute Gelegenheit mit den Entwicklertools zu üben, wie man damit Ursachenforschung betreibt.
dedlfix.
-
Kannst du mir wenigstens verraten, ob irgendwelche groben Fehler im Code sind? Ich bin nämlich noch Anfänger mit JavaScript.
-
Tach!
Kannst du mir wenigstens verraten, ob irgendwelche groben Fehler im Code sind? Ich bin nämlich noch Anfänger mit JavaScript.
Wenn grobe Fehler im Code sind, siehst du eine Fehlermeldung in der Console der Entwicklertools.
dedlfix.
-
-
-
-
-
Lieber andreas79,
ich habe versucht, einen Taschenrechner in JavaScript zu programmieren.
das ist recht trivial, was die eigentlichen Berechnungen angeht. Dein Problem liegt sicherlich woanders.
Dazu habe ich mir Hilfe aus der Wiki geholt.
Woher genau? Etwa hier (JavaScript/Anwendung und Praxis/Taschenrechner)?
Leider funktioniert alles bis auf die Berechnung.
Du hast anscheinend eine andere Quelle für Deine "Hilfe" gehabt. An oben verlinkter Stelle jedenfalls steht im Wiki, wie man das sinnvoller angeht, als das, was Du da an Code zeigst.
Kann mir vllt jemand weiterhelfen?
Nein. Nur Du kannst Dir weiterhelfen. Wir können Dir allenfalls Hilfestellung zur Selbsthilfe geben, wie dedlfix es ja schon versucht hat.
Liebe Grüße,
Felix Riesterer.
-
Hallo Felix,
Dazu habe ich mir Hilfe aus der Wiki geholt.
Woher genau? Etwa hier (JavaScript/Anwendung und Praxis/Taschenrechner)?
*zur Info
Das Bsp. funktioniert nicht im IE11Gruss
Henry-
Hallo Henry,
Das Bsp. funktioniert nicht im IE11
Danke für den Hinweis.
Bis demnächst
Matthias--
Rosen sind rot. -
Lieber Henry,
JavaScript/Anwendung und Praxis/Taschenrechner? *zur Info
Das Bsp. funktioniert nicht im IE11warum nicht? Hat der noch immer ein Problem mit addEventListener?
Liebe Grüße,
Felix Riesterer.
-
-
-
Hi,
> function Rechner () { > var zahl1; > var zahl2; > var ergebnis; > > if(operator == "+") { > ergebnis = zahl1 - -zahl2; > }weder zahl1 noch zahl2 wurden initialisiert. Da sollen vermutlich die Eingaben aus den inputs reinkommen …
cu,
Andreas a/k/a MudGuard-
Tach!
> function Rechner () { > var zahl1; > var zahl2; > var ergebnis; > > if(operator == "+") { > ergebnis = zahl1 - -zahl2; > }weder zahl1 noch zahl2 wurden initialisiert. Da sollen vermutlich die Eingaben aus den inputs reinkommen …
Das ist einer der Punkte, die man mit dem Debugging erkennen kann, selbst wenn man das Problem nicht allein durch Anschauen des Codes findet. Wenn man einen Breakpoint gesetzt hat und/oder sich schrittweise zur Zeile
ergebnis = zahl1 - -zahl2;vorgearbeitet hat, sieht man zwar noch nicht die Ursache, aber man kann sehen, wenn man die Maus auf die Variablen hält, dass in zahl1 und zahl2 nichts drin ist und sie beide stattdessen undefined sind. Das ist zumindest erstmal ein Anhaltspunkt, dass da eine Diskrepanz zwischen Erwartung und Wirklichkeit besteht. So etwas zu erkennen ist wichtig, bevor man die Frage stellt, wie man das korrigieren kann, wie man eine lauffähige Version hinbekommt.dedlfix.
-
-
Lieber andreas79,
ich habe mir einmal die Mühe gemacht, Deinen Code auszuprobieren. Dabei ist mir etwas aufgefallen: Deine Operatoren stehen in funktionslosen Buttons.
<p> <button type="button" id="plus">+</button> <button type="button" id="minus">-</button> <button type="button" id="mal">*</button> <button type="button" id="durch">/</button> </p>Wo wird denn ein Betätigen dieser Buttons ausgewertet? Richtig: Noch nirgends. Für die Berechnung geht Dein JavaScript-Code von einer Variable "operator" aus, in der entweder ein Plus-, ein Minus-Zeichen, ein Sternchen (Asterisk) oder ein Slash stehen soll:
if(operator == "+") { ergebnis = zahl1 - -zahl2; } if(operator == "-") { ergebnis = zahl1 - zahl2; } if(operator == "*") { ergebnis = zahl1 * zahl2; } if(operator == "/") { ergebnis = zahl1 / zahl2; }Wie kommt jetzt beim Drücken eines der Buttons sein Textinhalt in die Variable "operator"? Dass die Zahlenwerte der Eingabefelder ebenso nicht in die passenden Variablen "zahl1" und "zahl2" gelangen, hat Dir @MudGuard schon gesagt. Dazu könnte man Dir jetzt passende Hinweise geben, aber womit könntest Du überhaupt etwas anfangen?
Noch einmal: Woher hast Du Deinen Code? Und: Was hast Du an Deinem bisherigen Code schon verstanden? Wenn Du dazu weiter schweigst, kann man Dir nicht zu den nächsten Schritten raten, damit Du Dir selbst helfen kannst. Die allgemeinen Hinweise von dedlfix haben Dir offensichtlich nichts genützt. Aber etwas nützliches kann man Dir erst dann sagen, wenn Du wirklich mit machst. Mein Verdacht ist aber eher, dass Du Dir unser Wiki-Beispiel mit copy&paste "gezogen" hast und nun Deiner Wege gehst...
Liebe Grüße,
Felix Riesterer.
-
// It works!!! <form> <p> <label for="zahl1">erste Zahl: <input id="zahl1" type="number" value="0"> </label> </p> <p> <label for="operator">Operator: <input id="operator" type="text"> </label> <p> <label for="zahl2">zweite Zahl: <input id="zahl2" type="number" value="0"> </label> </p> <br> <p> <button type="button" id="rechnen">Berechnen</button> </p> <label> Ergebnis: <p id="ergebnis"></p> </label> </form>// function Rechner() { var zahl1 = document.getElementById('zahl1').value; var zahl2 = document.getElementById('zahl2').value; var operator = document.getElementById('operator').value; var ergebnis1 = 0; if (operator === "+") { ergebnis1 = zahl1 - (-1)* zahl2; } if (operator === "-") { ergebnis1 = zahl1 - zahl2; } if (operator === "*") { ergebnis1 = zahl1 * zahl2; } if (operator === "/") { ergebnis1 = zahl1 / zahl2; } document.getElementById('ergebnis').innerHTML = ergebnis1; } document.addEventListener('DOMContentLoaded', init); function init() { document.getElementById('rechnen').addEventListener('click', Rechner); }
-