input.value erst nach Aktualisieren der Seite auslesbar

[rzscout]

Hi Marco,
gerne helfe ich dir weiter und erkläre wie du dein Problem lösen kannst. Der Wert deine Eingabefeldes wird nur einmal abgefragt und das nur wenn die Seite neu geladen wird. Die Lösung ist ganz einfach. Schreibe den aktuellen Wert aus deinem Element innerhalb deiner Funktion.

Hier ein Beispiel von mir:

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.")
    }
}

Bitte bedenke das erst geprüft werden muss das der DOM komplett geladen wurde, sonst kann bei der Zuweisung von Elementen zu Variablen ein undefined enstehen was später Fehler herbeiführen kann. Verwende auch lieber die Methode 'Math.PI' anstatt pi als Variable zu speichern. Das arbeitet präziser und man muss nicht extra eine Variable anlegen.

Viel Spass beim lernen

rzscout