Falsche Ausgaben im Dokument
0 0 
j4nk3y
0 
Gunnar Bittersmann
0 0 
MudGuard
Falsche Ausgaben im Dokument
Matthias ApselIch bekomme immer im Abschnitt "ausgabe", egal welcher Wert eingegeben wurde, "undefined" heraus. Wieso?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<script type="text/javascript">
function noten() {
var eingabe = document.getElementById('inNote').value
var bedeutung;
switch (eingabe) {
case 1:
bedeutung = "Sehr gut";
break;
case 2:
bedeutung = "Gut";
break;
case 3:
bedeutung = "Befriedigend";
break;
case 4:
bedeutung = "Ausreichend";
break;
case 5:
bedeutung = "Mangelhaft";
break;
case 6:
bedeutung = "Ungenügend";
}
document.getElementById("ausgabe").innerHTML = bedeutung;
}
</script>
<title>Uebung 10</title>
</head>
<body>
<h1>Aufgabe 3</h1>
<form name="Schulnoten">
<label for="inNote">Bitte Schulnote (als Dezimalzahl) eingeben: </label>
<input type="number" id="inNote" min="0" step="1" >
<input type="button" value="Wasfuer1Note?" onClick="noten()">
<p id="ausgabe"></p>
</form>
</body>
</html>
akzeptierte Antworten
Falsche Ausgaben im Dokument
Bewertung: keine Bewertung
-
Ich bekomme immer im Abschnitt "ausgabe", egal welcher Wert eingegeben wurde, "undefined" heraus. Wieso?
Nachgeschaut:
var eingabe = document.getElementById('inNote').valueEs kommt ein String...
case 1:... den Du mit einer Zahl vergleichst. Das geht schief.
Lösung:
var eingabe = parseInt( document.getElementById('inNote').value );-
Vielen lieben Dank! Jetzt funktioniert es. :)
-
-
Hey,
Oder den String mit einem String vergleichen: case "1".
Gruß
Jo -
@@htmlmachmichverrückt
<html>Hier solltest du die Sprache des Seiteninhalts angeben, also
<html lang="de"><meta name="viewport" content="width=device-width, initial-scale=1.0;" />Das
;am Ende stört vielleicht(?) nicht, ist aber unnütz.<script type="text/javascript">Das
type="text/javascript"stört nicht, ist aber in HTML5 nicht mehr erforderlich.function noten() { var eingabe = document.getElementById('inNote').valueNö, nicht bei jedem Funktionsaufruf erneut das Eingabefeld aus dem DOM raussuchen. Das sollte einmalig außerhablb der Funktion geschehen:
var inNoteElement = document.getElementById('inNote'); function noten() { var eingabe = parseInt(inNoteElement.value);Hier setzen wir das Semikolon von oben ans Ende. ;-)
var bedeutung; switch (eingabe) { case 1: bedeutung = "Sehr gut"; break; case 2: bedeutung = "Gut"; break; case 3: bedeutung = "Befriedigend"; break; case 4: bedeutung = "Ausreichend"; break; case 5: bedeutung = "Mangelhaft"; break; case 6: bedeutung = "Ungenügend"; }Statt der Fallunterscheidung kannst du bei den Werten von 1 bis 6 auch mit einem Array arbeiten:
var bedeutung = ["Sehr gut", "Gut", "Befriedigend", "Ausreichend", "Mangelhaft", "Ungenügend"];Da der Arrayindex bei 0 zu zählen anfängt, musst du 1 abziehen, um an die jeweilige Bedeutung zu kommen:
bedeutung[eingabe - 1]Oder ein Dummyfeld als voranstellen:
var bedeutung = ["", "Sehr gut", "Gut", "Befriedigend", "Ausreichend", "Mangelhaft", "Ungenügend"];Dann
bedeutung[eingabe].(Ich bevorzuge die erste Variante.)
document.getElementById("ausgabe").innerHTML = bedeutung;Nö, nicht bei jedem Funktionsaufruf erneut das Ausgabefeld aus dem DOM raussuchen. Das sollte einmalig außerhablb der Funktion geschehen, s.o.
<label for="inNote">Bitte Schulnote (als Dezimalzahl) eingeben: </label>Ja, so soll das.
<input type="number" id="inNote" min="0" step="1" >Wieso
min="0"? Du hastmax="6"vergessen?<input type="button" value="Wasfuer1Note?" onClick="noten()">Für Buttons gibt es in HTML das
button-Element:<button onClick="noten()">Wasfuer1Note?</button>Besser wäre jedoch, JavaScript und HTML nicht zu mischen, also kein
onclick-Attribut (warum CamelCase?) zu verwenden, sondern den Eventhandler mit JavaScript registrieren.<p id="ausgabe"></p>Für Ausgaben gibt es in HTML das
output-Element.Und wenn du
input,buttonundoutputjeweils einname-Attribut spendierst, musst du die Elemente nicht anhand ihrer ID im ganzen DOM suchen lassen, sondern kannst sie aus der ohnehin schon vorhandenen Collection nehmen.LLAP 🖖
--
„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe-
Hey,
function noten() { var eingabe = document.getElementById('inNote').valueNö, nicht bei jedem Funktionsaufruf erneut das Eingabefeld aus dem DOM raussuchen. Das sollte einmalig außerhablb der Funktion geschehen:
Ach ja, ist das so? Heißt es nicht, dass man Referenzen auf DOM-Objekte nicht langfristig speichern sollte?
Reinhard
-
Hallo Reinhard,
Heißt es nicht, dass man Referenzen auf DOM-Objekte nicht langfristig speichern sollte?
So lange, wie sie benötigt werden. Und sollten sie noch ein weiteres mal benötigt werden, ist es doch schön, wenn man nicht danach suchen muss.
Bis demnächst
Matthias
-
-
Hi,
var inNoteElement = document.getElementById('inNote'); function noten() { var eingabe = parseInt(inNoteElement.value);Das würde aber nicht funktionieren - denn das Script-Element steht (noch) im head. inNoteElement ist dann also null, da das Element mit der id inNote ja erst viel (um nicht zu sagen Lichtjahre ;-)) später im body erzeugt wird.
Es fehlt also der Hinweis, das script-Element ans Ende vom body zu verschieben.
cu,
Andreas a/k/a MudGuard
-