Gunnar Bittersmann: Falsche Ausgaben im Dokument

Beitrag lesen

@@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').value

Nö, 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 hast max="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, button und output jeweils ein name-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