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
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" 