JS Taschenrechner, Dezimal in Binär und andersherum auch?
Hallo Zusammen,
ich bin seit knapp 3 Wochen in meiner Ausbildung und sollte einen Taschenrechner programmieren, was bis jetzt auch geklappt hat. Nun habe ich eine neue Aufgabe dazu bekommen, nämlich mit 2 Radio Buttons mir jeweils anzeigen zu lassen: Binär und Dezimal.
Ich bin absolut hilflos und freue mich über mögliche Lösungen und HIlfe. Danke im voraus.
<!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;
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;
}
</script>
</head>
<body>
<input type="radio" name="Umrechnung" value="Binär" />
<input type="radio" name="Umrechnung" value="Dezimal" />
<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>
2 Antworten
Hier ist ein Beispiel, wie du das machen kannst:
- HTML: Füge zwei Radio-Buttons hinzu, um zwischen Binär und Dezimal umzuschalten.
- 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.
Vielen Lieben Dank für deine erklärte Lösung. Warst mir echt eine Hilfe ! :)
Man kann Antworten mit Quellcode deutlich besser lesen wenn der Quellcode als solcher eingebettet ist (im Editor das </> Symbol).
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.