JS Taschenrechner, Dezimal in Binär und andersherum auch?

2 Antworten

Bdkykrf
27.08.2024, 16:29

Hier ist ein Beispiel, wie du das machen kannst:

  1. HTML: Füge zwei Radio-Buttons hinzu, um zwischen Binär und Dezimal umzuschalten.
  2. JavaScript: Implementiere die Umrechnungslogik.

Hier ist eine angepasste Version deines Codes:

<!DOCTYPE html>

<html lang="de">

<head>

 <meta charset="utf-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Taschenrechner No. 3</title>

 <script>

  let aktuellesErgebnis = 0;

  let modus;

  let aktuelleZahl;

  let umrechnung = "Dezimal";

  function AddLetter(zahl) {

   if (modus == null) {

    document.getElementById("textboxDisplay").value = zahl;

    modus = "Nummern";

   } else {

    document.getElementById("textboxDisplay").value += zahl;

   }

  }

  function Plus() {

   Hilfe();

   document.getElementById("textboxDisplay").value = "";

   modus = "Plus";

  }

  function Minus() {

   Hilfe();

   document.getElementById("textboxDisplay").value = "";

   modus = "Minus";

  }

  function Mal() {

   Hilfe();

   document.getElementById("textboxDisplay").value = "";

   modus = "Mal";

  }

  function Geteilt() {

   Hilfe();

   document.getElementById("textboxDisplay").value = "";

   modus = "Geteilt";

  }

  function Restwert() {

   Hilfe();

   document.getElementById("textboxDisplay").value = "";

   modus = "Modulo";

  }

  function Gleich() {

   Hilfe();

   document.getElementById("textboxDisplay").value = aktuellesErgebnis;

   modus = null;

  }

  function Hilfe() {

   aktuelleZahl = Number(document.getElementById("textboxDisplay").value);

   if (modus == "Plus") {

    aktuellesErgebnis += aktuelleZahl;

   }

   if (modus == "Minus") {

    aktuellesErgebnis -= aktuelleZahl;

   }

   if (modus == "Mal") {

    aktuellesErgebnis *= aktuelleZahl;

   }

   if (modus == "Geteilt") {

    aktuellesErgebnis /= aktuelleZahl;

   }

   if (modus == "Modulo") {

    aktuellesErgebnis %= aktuelleZahl;

   }

   if (modus == null || modus == "Nummern") {

    aktuellesErgebnis = aktuelleZahl;

   }

  }

  function Weg() {

   document.getElementById("textboxDisplay").value = "";

   aktuellesErgebnis = 0;

   modus = null;

  }

  function setUmrechnung(value) {

   umrechnung = value;

   updateDisplay();

  }

  function updateDisplay() {

   let displayValue = aktuellesErgebnis;

   if (umrechnung === "Binär") {

    displayValue = aktuellesErgebnis.toString(2);

   }

   document.getElementById("textboxDisplay").value = displayValue;

  }

 </script>

</head>

<body>

 <input type="radio" name="Umrechnung" value="Dezimal" onclick="setUmrechnung('Dezimal')" checked /> Dezimal

 <input type="radio" name="Umrechnung" value="Binär" onclick="setUmrechnung('Binär')" /> Binär

 <input id="textboxDisplay" readonly />

 <input type="button" value="1" onclick="AddLetter('1')" />

 <input type="button" value="2" onclick="AddLetter('2')" />

 <input type="button" value="3" onclick="AddLetter('3')" />

 <input type="button" value="4" onclick="AddLetter('4')" />

 <input type="button" value="5" onclick="AddLetter('5')" />

 <input type="button" value="6" onclick="AddLetter('6')" />

 <input type="button" value="7" onclick="AddLetter('7')" />

 <input type="button" value="8" onclick="AddLetter('8')" />

 <input type="button" value="9" onclick="AddLetter('9')" />

 <input type="button" value="0" onclick="AddLetter('0')" />

 <input type="button" value="+" onclick="Plus()" />

 <input type="button" value="-" onclick="Minus()" />

 <input type="button" value="*" onclick="Mal()" />

 <input type="button" value="/" onclick="Geteilt()" />

 <input type="button" value="Mod" onclick="Restwert()" />

 <input type="button" value="Löschen" onclick="Weg()" />

 <input type="button" value="=" onclick="Gleich()" />

</body>

</html>

In diesem Beispiel wird der Wert im Display aktualisiert, wenn du zwischen Binär und Dezimal umschaltest. Du kannst die Funktion 

setUmrechnung

 verwenden, um den Umrechnungsmodus zu ändern, und die Funktion 

updateDisplay

, um den angezeigten Wert entsprechend zu aktualisieren.
jacksonAri 
Beitragsersteller
 30.08.2024, 08:55

Vielen Lieben Dank für deine erklärte Lösung. Warst mir echt eine Hilfe ! :)

0
Suiram1  27.08.2024, 19:07

Man kann Antworten mit Quellcode deutlich besser lesen wenn der Quellcode als solcher eingebettet ist (im Editor das </> Symbol).

1
BeamerBen
27.08.2024, 14:29

Woran Hängt es denn und was soll das genau tun? Musst du die Zahlen auch zb in binär eingeben oder nur die Ausgabe in binär umwandeln?

Ich würde das lösen indem ich erst mal alle Operationen die das dom auslesen oder schreiben in bestimmte Funktionen packe.

Du scheinst nicht mit Parametern und Rückgabewerten zu arbeiten. Das ist etwas was du dir mal anschauen kannst für sauberen Code:

https://developer.mozilla.org/en-US/docs/Glossary/Parameter

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return

Dann würde ich in der Ausgabe (und falls gewünscht in der Eingabe) die Zahlen mit binär umwandeln und intern immer nur mit Dezimal arbeiten.

Nummern in ein anderes Zahlensystem umwandeln ist in JavaScript mit eingebauten Funktionen gar kein Problem: https://stackoverflow.com/questions/1337419/how-do-you-convert-numbers-between-different-bases-in-javascript#1337428

Zur Erinnerung, binär System = Basis 2, Dezimalsystem = Basis 10.

Da du nicht geschrieben hast was genau das Problem ist, schau Dir das einfach mal an und wenn du nicht alles versteht auch nicht schlimm. Aber prinzipiell steht im Stack overflow post alles was du brauchst um das umzusetzen.