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>
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>