Also du hast außer das ein paar fehler im Code 1. Du solltest am besten dein Css code in eine eigene datei machen. 2. Buttons zu benutzen für ein Taschenrechner kann man nicht so gut benutzen ich habe mal ein beispiel wie ich das gemacht habe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taschenrober</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.webmanifest">
<style>
body {
font-family: 'Montserrat', sans-serif;
margin: 0%;
}
table {
width: 100%;
height: 70vh;
color: white;
background-color: rgb(25, 25, 25);
}
td {
width: 25%;
text-align: center;
background-color: rgb(20, 20, 20);
font-size: 24px;
}
td:hover {
background-color: rgb(30 ,30 ,30);
cursor: pointer;
;
}
#result-area {
height: 30vh;
background-color: rgb(40, 40, 40);
color: white;
font-size: 48px;
display: flex;
justify-content: flex-end;
align-items: flex-end;
padding: 24px;
box-sizing: border-box;
}
#result {
background-color: rgb(67, 55, 236);
}
#result:hover {
background-color: rgb(110, 101, 235);
}
.highlight {
background-color: rgb(25, 25, 25);
}
</style>
<script>
function appendOperation(operation){
document.getElementById('result-area').innerHTML += operation;
}
function calculate() {
let container = document.getElementById('result-area');
let result = eval(container.innerHTML);
container.innerHTML = result;
}
function deletelast() {
let container = document.getElementById('result-area');
if(container.innerHTML.endsWith(' ')){
} else{
container.innerHTML = container.innerHTML.slice(0, -3);
}
}
</script>
</head>
<body>
<div id="result-area">
</div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td onclick="deletelast()">Löschen</td>
</tr>
<tr>
<td onclick="appendOperation(7)">7</td>
<td onclick="appendOperation(8)">8</td>
<td onclick="appendOperation(9)">9</td>
<td onclick="appendOperation('/')"class="highlight">/</td>
</tr>
<tr>
<td onclick="appendOperation(4)">4</td>
<td onclick="appendOperation(5)">5</td>
<td onclick="appendOperation(6)">6</td>
<td onclick="appendOperation('*')" class="highlight" >x</td>
</tr>
<tr>
<td onclick="appendOperation(1)">1</td>
<td onclick="appendOperation(2)">2</td>
<td onclick="appendOperation(3)">3</td>
<td onclick="appendOperation('+')" class="highlight">+</td>
</tr>
<tr>
<td onclick="appendOperation(0)">0</td>
<td onclick="appendOperation('.')">,</td>
<td onclick="calculate()" id="result">=</td>
<td class="highlight" onclick="appendOperation('-')">-<td>
</tr>
</table>
</body>
/* By Rober Amjed */
ist bisschen länger her der code aber klappt noch du sollst ihn jetzt nicht kopieren meine ich aber solche elemte sind besser als buttons mit buttons bekommst du meistens mehr probleme als mit td und tr also bei mir war es so. Versuch es mal mit
display: flex;
Ich hoffe ich konnte dir Weiterhelfen.
