Javascript-forum

Normale Version: Taschenrechner programmieren
Sie sehen gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Hallo zusammen, ich habe über Youtube angeschaut, wie man einen Taschenrechner programmieren kann. Ich habe den Code nur abgeschrieben (ich bin ganz am Anfang) aber leider geht dieser nicht. Er müsste, sobald ich auf die 7 drücke, die 7 im Result-Feld ergänzen. Könnt ihr mir helfen? Ich habe den Fehler nicht gefunden. Die letzten Zeilen ab der 2. Tabelle unten waren nur ein Test. VG 

<!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>Document</title>
  <style>
    table {
    width: 100%;
    height: 70% vH;
    background-color: black;
    color: white
}
td {
  width: 25%;
  text-align: center;
}
    td:hover {
      cursor:pointer;
      background-color: blueviolet;
    }
#resultArea {
  height: 30vh;
  background-color: blue;
  color: white;
  font-size: 64px;
  display: flex;
  justify-content: flex-end;
  padding: 24px;
  box-sizing: border-box;
}
#result {
  backround-color: rgb(67, 55, 236);
}
#result:hover {
  background-color: rgb(110, 101, 235);
}
  </style>
<script>
  function appendOperation(operation) {
     document.getElementById('resultArea').innerHtml += operation;
      }
 
    </script>
</head>
<body>
  <div id="resultArea"></div>
  <table>
    <td onclick="appendOperation(7)">7</td>
    <td onclick="appendOperation(8)">8</td>
    <td>9</td>
    <td id="result">=</td>
  </table>
 
  <table>
    <td id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).>clickMe</td>
     </table>
 
   <script>
function myFunction() {
  document.getElementById("demo").innerHTML = "I have changed!";
}
</script>
</body>
</html>
Verwende anstatt die .innerHTML-Methode doch einfach die .textContent-Methode. Dann wird kein Fehler ausgegeben.