input.value erst nach Aktualisieren der Seite auslesbar

Code:

"use strict";

//Deklaration vor dem EvenListener damit man global auf die Variablen zugreifen kann

var flächenButton, eingabewert, umfangButton, ergebnisAusgabe, qcm = 0;

// Der Event-Listener reagiert wenn der DOM vollständig geladen wurde.

document.addEventListener('DOMContentLoaded', init);

// Initalisierungs-Funktion wird ausgeführt wenn alles geladen wurde, sonst kommt es zu Fehler

function init() {

    // Zuweisung der Elemente zu den Variablen

    flächenButton = document.getElementById("idFlächenButton");

    eingabewert = document.getElementById("idEingabefeld");

    umfangButton = document.getElementById("idUmfangButton");

    ergebnisAusgabe = document.getElementById("idErgebnis");

}

function kreisflächeBerechnen() {

    // Die Variable radius ist mit der parseInt-Methode zu einem Integer umgewandelt worde.

    let radius = parseInt(eingabewert.value);

    let ergebnis = (radius * radius * Math.PI);

    // Math.PI ist immer besser als die PI-Zahl direkt reinzuschreiben

    qcm = (ergebnis / 100);

    return (ergebnis);

}

function kreisflächeÜbergeben() {

    if (übergabewert.length > 0) {

        // Hier wird mit String-Literals gearbeitet die mit `` geschrieben werden. Innerhalb von ${} können dann Variablen

        ergebnisAusgabe.textContent = `Der Kreis hat eine Fläche von: ${kreisflächeBerechnen()}qmm. Das sind ${qcm}qcm.`;

        eingabewert.value = '';

    } else {

        alert("Bitte gib eine Zahl ein.")

    }

}

function kreisumfangBerechnen() {

    let radius = parseInt(eingabewert.value);

    return (radius * 2 * Math.PI);

}

function kreisumfangÜbergeben() {

    if (übergabewert.length > 0) {

        ergebnisAusgabe.textContent = `Der Kreis hat einen Umfang von ${kreisumfangBerechnen()}mm bzw. ${(kreisumfangBerechnen() / 10)}cm.`;

        eingabewert.value = '';

    } else {

        alert("Bitte gib eine Zahl ein.")

    }

}

Code:

<!DOCTYPE html>

<html lang="de">

<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>Radius Berechnen</title>

    <script>

        "use strict";

//Deklaration vor dem EvenListener damit man global auf die Variablen zugreifen kann

var flaechenButton, eingabewert, umfangButton, ergebnisAusgabe, qcm = 0;

// Der Event-Listener reagiert wenn der DOM vollständig geladen wurde.

document.addEventListener('DOMContentLoaded', init);

// Initalisierungs-Funktion wird ausgeführt wenn alles geladen wurde, sonst kommt es zu Fehler

function init() {

    // Zuweisung der Elemente zu den Variablen

    flaechenButton = document.getElementById("FlaechenButton");

    eingabewert = document.getElementById("Eingabefeld");

    umfangButton = document.getElementById("UmfangButton");

    ergebnisAusgabe = document.getElementById("Ergebnis");

    flaechenButton.addEventListener("click", kreisflächeÜbergeben);

    umfangButton.addEventListener("click", kreisumfangÜbergeben);

}

function kreisflächeBerechnen() {

    // Die Variable radius ist mit der parseInt-Methode zu einem Integer umgewandelt worde.

    let radius = parseInt(eingabewert.value);

    let ergebnis = (radius * radius * Math.PI);

    // Math.PI ist immer besser als die PI-Zahl direkt reinzuschreiben

    qcm = (ergebnis / 100);

    return (ergebnis);

}

function kreisflächeÜbergeben() {

    let übergabewert = eingabewert.value;

    if (übergabewert.length > 0) {

        // Hier wird mit String-Literals gearbeitet die mit `` geschrieben werden. Innerhalb von ${} können dann Variablen

        ergebnisAusgabe.textContent = `Der Kreis hat eine Fläche von: ${kreisflächeBerechnen().toFixed(2)}mm². Das sind ${qcm.toFixed(2)}cm².`;

        eingabewert.value = '';

    } else {

        alert("Bitte gib eine Zahl ein.")

    }

}

function kreisumfangBerechnen() {

    let radius = parseInt(eingabewert.value);

    return (radius * 2 * Math.PI);

}

function kreisumfangÜbergeben() {

    let übergabewert = eingabewert.value;

    if (übergabewert.length > 0) {

        ergebnisAusgabe.textContent = `Der Kreis hat einen Umfang von ${kreisumfangBerechnen().toFixed(2)}mm bzw. ${(kreisumfangBerechnen() / 10).toFixed(2)}cm.`;

        eingabewert.value = '';

    } else {

        alert("Bitte gib eine Zahl ein.")

    }

}

    </script>

</head>

<body>

    <h1>Hier kannst du verschiedene Funktionen zur Berechnung von Kreisen nutzen.</h1>

<div class="introText">

<p>Gib den Radius deines Kreises in mm in das Eingabefeld ein.</p>

</div>

<div class="eingabeBereich">

<div>

<input id="Eingabefeld" type="text" maxlength="6" placeholder="Radius in mm...">

</div>

<div>

<button id="FlaechenButton">Kreisfläche berechnen</button>

</div>

<div>

<button id="UmfangButton">Kreisumfang berechnen</button>

</div>

<p id="Ergebnis" class="ergebnisAusgabe">Ergebnis:</p>

</div>

</body>

</html>