Frage von GazelleDiamond, 51

Taschenrechner mit Java Script und HTML programmieren?

Ok, folgendes: Ich muss in der Schule mit Hilfe von HTML und Java Script einen Taschenrechner programmieren. Ich habe alles soweit gemacht, wie der Lehrer es erklärt und an die Tafel geschrieben hat. Allerdings funktioniert es trotzdem nicht. Ich denke ihr versteht das Programm, wenn ihr es euch genauer anschaut und könnt mir meinen Fehler sagen. Vielen Dank schonmal :)

<!DOCTYPE>
<html>
<head>
<style>
td {
    text-align:center
}

</style>
</head>

<body>

<table align = "center">
<tr>

    <td> <input name = "input_a" ; type = "number" ; onkeyup = "rechnen()"> </input> </td>

    <td> <input name = "input_b" ; type = "number" ; onkeyup = "rechnen()"> </input></td> <!-- Hier werden die Input-Felder in die Tabelle eingefügt -->

    <td> <button align= "center" ; onclick = "rechnen()"> Rechnen </button> </td> <!-- Dies ist der Button, der die Funktion "Rechnen" auslöst -->

</tr>

<tr>

    <td text-align = "center"> Addition </td>

    <td text-align = "center" ; id = "add"> </td> <!-- Hier ist das Ergebnis, der Addition der beiden Zahlen aus den Input-Feldern --> 

</tr>

<tr>

    <td text-align = "center"> Subtraktion </td>

    <td text-align = "center" ; id = "sub"> </td> <!-- Hier ist das Ergebnis, der Subtraktion der beiden Zahlen aus den Input-Feldern -->

</tr>

<tr>

    <td text-align = "center"> Multiplikation </td>

    <td text-align = "center" ; id = "mul"> </td> <!-- Hier ist das Ergebnis, der Multiplikation der beiden Zahlen aus den Input-Feldern -->

</tr>

<tr>

    <td text-align = "center"> Division </td>

    <td text-align = "center" ; id = "div"> </td> <!-- Hier ist das Ergebnis, der Division der beiden Zahlen aus den Input-Feldern -->

</tr> 

<script>

rechnen = function() {          <!-- Dies ist die Funktion "Rechnen" -->
    addition = c
    subtraktion = d
    multiplikation = e
    division = f 
}

    var c = a+b ;       <!-- Hier werden die Variabeln definiert -->
    var d = a-b ;
    var e = a*b ;
    var f = a/b ;

    document.getElementsByName("input_a").innerHTML = a ;   
    document.getElementsByName("input_b").innerHTML = b ;
    document.getElementById("add").innerHTML = c;
    document.getElementById("sub").innerHTML = d;
    document.getElementById("mul").innerHTML = e;
    document.getElementById("div").innerHTML = f;

    console.log

</script>

</body>
</html>
Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Berny96, 41

Der Fehler liegt dabei dass du von der Tafel abgeschrieben hast. Dein Lehrer hat in der rechnen() Funktionen lediglich hingeschrieben was denn getan werden soll und nicht die Umsetzung in javascript. Ich habs dir mal zum laufen gebracht jedoch erkläre ich nicht genau weshalb mein Code läuft und deiner nicht weil dein Ansatz nicht einmal Code enthält so kann ich dir nicht erklären was da falsch lief. Jedenfalls ist der "rechnen" Button absolut nicht nötig da die keyup funktionen beim eingeben der Zahlen schon rechnen() aufruft. Hier mal der Code: http://pastebin.com/raw/U6YeYkGx

PS: Um mal ein wenig zu erklären was denn genau in rechnen() passiert:

  • Eingetippte Zahlen werden geholt. (var a = ...; var b = ...)
  • Die jeweils verschiedenen Ergebnisses werden berechnet und in variabeln gespeichert. (var c = a+b; etc...)
  • Die Ergebnisse werden in die dafür vorgesehene HTML Elemente geschrieben damit der Nutzer diese sieht. (document.getElementById('add').innerHTML = c; etc..)

Kommentar von GazelleDiamond ,

Vielen Dank, aber kannst du mir evtl. noch erklären, was in

if(a && b)

eigentlich passiert?

Kommentar von Berny96 ,

Wenn man eine Variabel einfach abfragt, fragt man ob ob sie existiert. Sie wird in folgenden zuständen false liefern: undefined, null, "" oder 0 (bei 0 bin ich mir nicht sicher). Ist sie aber gesetzt kommt true zurück. Damit verhindere ich dass mit nicht existierenden werten gerechnet wird und als ergebnis "NaN" (Not A Number) erscheint. Entfernt man die Abfrage, so steht im Ergebnis wenn man gerade dabei ist die Erste zahl einzutragen NaN. Kannst ja mal ausprobieren :)

Kommentar von GazelleDiamond ,

Ok, danke dir :)

Antwort
von geri3d, 36

Ich weiss nicht obs hilfreich ist, da habe ich einmal einen Taschenrechner in HTA-VBScript geschrieben. Sollte unter Win7 problemlos gehen, Win10 unterstützt HTA nicht mehr. Hier mein Quellcode:

http://pastebin.com/gaj5mUTh

Keine passende Antwort gefunden?

Fragen Sie die Community