Login

Marco · 11.03.2023, 22:17

Guten Abend,
ich bin noch blutiger Anfänger in JS und allgemein beim Programmieren und habe mich an ein kleines Projekt zur Übung gemacht. Sicher kein Ding für viele, aber für mich eine Herausforderung. Nun probiere ich schon seit fast zwei Stunden hin und her und bekomme es einfach nicht hin.

Ich habe ein script in einer html-Datei, welches Kreisberechnungen vornehmen soll. Dazu gibt es ein input, wo der user einen Wert in mm eintragen soll. Danach zwei Buttons die zur Flächen- bzw. Umfangberechnung des Kreises führen. Ausgegeben wird das Ergebnis über innerhtml in einen Paragraph am Ende der html-Datei.

Die Funktionen laufen auch alle. Aber wenn ich im Inputfeld einen Wert eintrage, wird dieser nicht erkannt. Erst wenn ich mit F5 die Seite aktualisiere, funktioniert die Berechnung.
Ich habe also scheinbar ein Timing-Problem?

Ich weiß mir keinen Rat mehr. Für mich ist der Code in logischer Reihenfolge geschrieben und funktieniert ja -wie gesagt- auch. Aber eben erst nach Aktualisieren der Seite.

Ich hoffe ich habe mein Problem so schildern können, dass ihr wisst was ich meine.

Bin für jede Hilfe dankbar.

Grüße
Marco

hier ist mein Code:

<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="idEingabefeld" type="text" maxlength="6" placeholder="Radius in mm...">
</div>
<div>
<button id="idFlächenButton">Kreisfläche berechnen</button>
</div>
<div>
<button id="idUmfangButton">Kreisumfang berechnen</button>
</div>
<p id="idErgebnis" class="ergebnisAusgabe">Ergebnis:</p>
</div>

<script>
"use strict"
let flächenButton = document.getElementById("idFlächenButton");
let eingabewert = document.getElementById("idEingabefeld");
let übergabewert = eingabewert.value;
let umfangButton = document.getElementById("idUmfangButton");
let ergebnisAusgabe = document.getElementById("idErgebnis");

const pi = 3.1415;
let radius = übergabewert;
let qcm = kreisflächeBerechnen() / 100;

function kreisflächeBerechnen() {
return (radius * radius * pi);
}

function kreisflächeÜbergeben() {
if (übergabewert.length > 0) {
ergebnisAusgabe.innerHTML = "Der Kreis hat eine Fläche von: " + kreisflächeBerechnen() + " qmm. Das sind " + qcm + " qcm.";
eingabewert.value = "";
} else {
alert("Bitte gib eine Zahl ein.")
}
}

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

function kreisumfangBerechnen() {
return (radius * 2 * pi);
}

function kreisumfangÜbergeben() {
if (übergabewert.length > 0) {
ergebnisAusgabe.innerHTML = "Der Kreis hat einen Umfang von " + kreisumfangBerechnen() + " mm bzw. " + (kreisumfangBerechnen() / 10) + " cm.";
eingabewert.value = "";
} else {
alert("Bitte gib eine Zahl ein.")
}
}

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

</script>
</body>

***rzscout*** · 12.03.2023, 13:54

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

Marco · 12.03.2023, 19:18

Guten Abend und vielen Dank für die Antwort.
Ich habe es so nachgebaut, aber es funktionert leider nicht..
Fehlt in dem Code jetzt nicht der EventListener für das Klick-Ereignis der Buttons?
Ich habe es mit reingenommen und auch da funktioniert es nicht. Irgendwas mache ich verkehrt.

Liebe Grüße
Marco

***rzscout*** · 12.03.2023, 23:03

(12.03.2023, 19:18)Marco schrieb: Guten Abend und vielen Dank für die Antwort.
Ich habe es so nachgebaut, aber es funktionert leider nicht..
Fehlt in dem Code jetzt nicht der EventListener für das Klick-Ereignis der Buttons?
Ich habe es mit reingenommen und auch da funktioniert es nicht. Irgendwas mache ich verkehrt.

Liebe Grüße
Marco

Hi Marco, ich habe da ein paar Sachen vergessen aber ich habe die den Code angepasst und dir eine neue Version erstellt. Diese habe ich getestet und funktioniert super.

Hier die neue Version:

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>

Viele Grüße

rzscout

Login
Benutzername:
Passwort:	Passwort vergessen?
	Merken