HTML-Code für Wurzelziehen/Radizieren?

SusgUY446  16.11.2023, 16:57

Was funktioniert nicht? Die Anzeige oder die Berechnung?
Allie477 
Fragesteller
 16.11.2023, 17:08

Den Button an sich zeigt es an. Aber wenn ich auf ihn drücke passiert nichts. Es liegt vermutlich an der Berechnung.

1 Antwort

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Informatik, Programmiersprache
16.11.2023, 17:30

1) Die Syntax deines Attributs ist nicht korrekt. Hinter dem Attributnamen darf kein Doppelpunkt stehen.

2) Für die Wurzelberechnung muss der sqrt-Methode eine Zahl übergeben werden. Das Ergebnis müsstest du in dein Ergebnisfeld zurückschreiben.

<input onclick="document.Taschenrechner.erg.value=Math.sqrt(parseFloat(document.Taschenrechner.erg.value))" type="button" value="Wurzel">

Die parseFloat-Funktion konvertiert erst den Wert aus deinem Ergebnisfeld (eine Zeichenkette) in eine Fließkommazahl. Diese Zahl wird an die sqrt-Funktion übergeben. Das Ergebnis wird dem value-Property des HTMLInputElements zugewiesen.

3) Dein Dokument beinhaltet mehrere Fehler.

  • Innerhalb deines head gibt es kein title-Element. Es handelt sich um kein optionales Element, der Seitentitel darf nicht leer sein.
<head>
  <title>Taschenrechner</title>
  <!-- ... -->
</head>
  • Das h1-Element gehört in den body. Es stellt eine Überschrift dar, also ein visuell sichtbares Seitenelement.
  • Es gibt keine Elemente label1 oder label2 in HTML. Entferne die Ziffern aus dem Namen.
  • Labels sind des Weiteren dazu da, ein bestimmtes Formularfeld zu beschriften/beschreiben. Für eine Assoziation zwischen Feld und Label werden die Attribute for und id benutzt:
<label for="username">Username</label>
<input id="username">
  • Für eine semantische Gruppierung der Buttons könnte man stattdessen eine Auflistung in einem Fieldset verwenden. Via CSS kann man die Auflistung entsprechend anpassen.
<fieldset class="operations">
  <legend>Rechensymbole</legend>
  <ul class="button-list">
    <li><input type="button" value="Button 1">
    <li><input type="button" value="Button 2">
    <li><!-- ... -->
  </ul>
</fieldset>

CSS:

.operations {
  border: 0;
  padding: 0;
}

.operations > legend {
  left: 0;
}

.button-list {
  column-gap: 4px;
  display: flex;
  list-style-type: none;
  padding: 0;
}
  • Es gibt keinen input-Typ textfield. Entweder du nutzt den Wert text oder du lässt das type-Attribut komplett weg (text ist bereits der Standardwert).

4) Generell wäre es besser (schöner, übersichtlicher), wenn du deinen JavaScript-Code stärker vom HTML-Code separieren würdest. Schau dir den script-Tag dafür an.

Man könnte die Rechenoperationen beispielsweise in eigene Funktionen auslagern.

Beispiel:

<!doctype html>
<title>Calculator</title>
<body>
  <form name="calculator">
    <input onclick="add(1)" type="button" value="1">
    <!-- ... --->
    <input name="result">
  </form>
  <script>
    const resultField = document.calculator.result;

    function add(value) {
      resultField.value += value;
    }
  </script>
</body>
Allie477 
Fragesteller
 16.11.2023, 17:50

Vielen Dank für die umfassende Antwort. Ich werde versuchen alles zu berichtigen. Leider kann ich mich nicht weiter von HTML entfernen, weil die Aufgabenstellung strickt HTML code benannt hat und mir da kein Freiraum gelassen wird. Aber sonst ist wirklich alles eine große Hilfe. Danke!

0