Erstellen eines einfachen Taschenrechners mit Javascript [geschlossen] ⇐ HTML

[Anonymous]

Code: Select all

Ich habe versucht, einen einfachen Funktionsrechner mit HTML, CSS und JavaScript zu erstellen und bin dabei auf einige Probleme gestoßen.
Ich habe eine Funktion „appendToDisplay()“ erstellt, um die Werte der Schaltflächen anzuzeigen, wenn darauf geklickt wird, aber die Funktion funktioniert nicht. Ich weiß nicht, ob der Fehler von meinem HTML oder meinem JavaScript herrührt.
Ich habe auch eine Funktion „calcute()“ und eine Funktion „clear“ erstellt, und beide sind nicht aktiv.
Ich bin ein Neuling und habe daher bitte Geduld mit mir.
Ich erinnere mich auch daran, dass die Konsole immer wieder sagte, dass auf die „Anzeige“ vor der Initialisierung nicht zugegriffen werden kann, während die Anzeige in meinem Code initialisiert wurde, bevor sie in der Funktion verwendet wurde, oder irre ich mich?

Code: Select all

const display = document.getElementById("display");

function appendToDisplay(input) {
display.value += input;
}

function clearDisplay(){
display.value = "";
}

function calculate(){
try {
display.value = eval(display.value);
} catch (error) {
display.value = "Error";
}

}

Code: Select all

/*calculator*/
#calculator{
width: 400px;
height: 675px;
background-color: black;
border-radius: 15px;
color: white;
font-family: Arial, Helvetica, sans-serif;
max-width: 500px;
}
#calculator input{
height: 200px;
width: 340px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
background-color: rgba(128, 128, 128, 0.233);
border: none;
text-align: right;
color:white;
font-size: 2rem;
}
.keys{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 13px;
padding: 10px;
margin: 8px;
}
#display{
width: 100%;
color:white;
padding: 30px;
font-size: 2rem;
text-align: left;
border:none;
}
#calculator button{
width: 65px;
height: 65px;
font-size: 2rem;
border-radius: 50%;
background-color:rgba(128, 128, 128, 0.233);
color: white;
border:none;
font-weight: 200;
box-shadow: 0px 2px 8px #ccccccde;
}
#calculator button:hover{
background-color: rgba(128, 128, 128, 0.836);
}
#calculator .op{
background-color: rgba(255, 166, 0, 0.884);
}
#calculator .op:hover{
background-color: rgb(255, 166, 0);
}

Code: Select all

Js project minis







+
7
8
9
-
4
5
6
*
1
2
3
/
0
.
=
C