Falsche Ausgaben im Dokument bearbeitet von Gunnar Bittersmann 27.12.2016 18:33 @@htmlmachmichverrückt > ~~~html > <html> > ~~~ Hier [solltest du](https://www.w3.org/International/questions/qa-lang-why) die [Sprache des Seiteninhalts angeben](https://www.w3.org/International/questions/qa-html-language-declarations), also `<html lang="de">`{: .language-html style="white-space: nowrap"} > ~~~html > <meta name="viewport" content="width=device-width, initial-scale=1.0;" /> > ~~~ Das `;` am Ende stört vielleicht(?) nicht, ist aber unnütz. > ~~~html > <script type="text/javascript"> > ~~~ Das `type="text/javascript"` stört nicht, ist aber in HTML5 nicht mehr erforderlich. > ~~~js > 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: ~~~js var inNoteElement = document.getElementById('inNote'); function noten() { var eingabe = parseInt(inNoteElement.value); ~~~ Hier setzen wir das Semikolon von oben ans Ende. ;-) > ~~~js > 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: ~~~js 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]`{: .language-js style="white-space: nowrap"} Oder ein Dummyfeld als voranstellen: ~~~js var bedeutung = ["", "Sehr gut", "Gut", "Befriedigend", "Ausreichend", "Mangelhaft", "Ungenügend"]; ~~~ Dann `bedeutung[eingabe]`{: .language-js}. (Ich bevorzuge die erste Variante.) > ~~~js > 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. > ~~~html, good > <label for="inNote">Bitte Schulnote (als Dezimalzahl) eingeben: </label> > ~~~ Ja, so soll das. > ~~~html > <input type="number" id="inNote" min="0" step="1" > > ~~~ Wieso `min="0"`? Du hast `max="6"` vergessen? > ~~~html > <input type="button" value="Wasfuer1Note?" onClick="noten()"> > ~~~ Für Buttons gibt es in HTML das `button`-Element: `<button onClick="noten()">Wasfuer1Note?</button>`{: .language-html} Besser wäre jedoch, JavaScript und HTML nicht zu mischen, also kein `onclick`-Attribut (warum CamelCase?) zu verwenden, sondern den [Eventhandler mit JavaScript registrieren](http://molily.de/js/event-handling-fortgeschritten.html#dom-events). > ~~~html > <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](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/forms/elements) nehmen. LLAP 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe
Falsche Ausgaben im Dokument bearbeitet von Gunnar Bittersmann 27.12.2016 18:35 @@htmlmachmichverrückt > ~~~html > <html> > ~~~ Hier [solltest du](https://www.w3.org/International/questions/qa-lang-why) die [Sprache des Seiteninhalts angeben](https://www.w3.org/International/questions/qa-html-language-declarations), also `<html lang="de">`{: .language-html} > ~~~html > <meta name="viewport" content="width=device-width, initial-scale=1.0;" /> > ~~~ Das `;` am Ende stört vielleicht(?) nicht, ist aber unnütz. > ~~~html > <script type="text/javascript"> > ~~~ Das `type="text/javascript"` stört nicht, ist aber in HTML5 nicht mehr erforderlich. > ~~~js > 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: ~~~js var inNoteElement = document.getElementById('inNote'); function noten() { var eingabe = parseInt(inNoteElement.value); ~~~ Hier setzen wir das Semikolon von oben ans Ende. ;-) > ~~~js > 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: ~~~js 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]`{: .language-js style="white-space: nowrap"} Oder ein Dummyfeld als voranstellen: ~~~js var bedeutung = ["", "Sehr gut", "Gut", "Befriedigend", "Ausreichend", "Mangelhaft", "Ungenügend"]; ~~~ Dann `bedeutung[eingabe]`{: .language-js}. (Ich bevorzuge die erste Variante.) > ~~~js > 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. > ~~~html, good > <label for="inNote">Bitte Schulnote (als Dezimalzahl) eingeben: </label> > ~~~ Ja, so soll das. > ~~~html > <input type="number" id="inNote" min="0" step="1" > > ~~~ Wieso `min="0"`? Du hast `max="6"` vergessen? > ~~~html > <input type="button" value="Wasfuer1Note?" onClick="noten()"> > ~~~ Für Buttons gibt es in HTML das `button`-Element: `<button onClick="noten()">Wasfuer1Note?</button>`{: .language-html} Besser wäre jedoch, JavaScript und HTML nicht zu mischen, also kein `onclick`-Attribut (warum CamelCase?) zu verwenden, sondern den [Eventhandler mit JavaScript registrieren](http://molily.de/js/event-handling-fortgeschritten.html#dom-events). > ~~~html > <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](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/forms/elements) nehmen. LLAP 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe
Falsche Ausgaben im Dokument bearbeitet von Gunnar Bittersmann 27.12.2016 18:34 @@htmlmachmichverrückt > ~~~html > <html> > ~~~ Hier [solltest du](https://www.w3.org/International/questions/qa-lang-why) die [Sprache des Seiteninhalts angeben](https://www.w3.org/International/questions/qa-html-language-declarations), also `<html lang="de">`{: .language-html} > ~~~html > <meta name="viewport" content="width=device-width, initial-scale=1.0;" /> > ~~~ Das `;` am Ende stört vielleicht(?) nicht, ist aber unnütz. > ~~~html > <script type="text/javascript"> > ~~~ Das `type="text/javascript"` stört nicht, ist aber in HTML5 nicht mehr erforderlich. > ~~~js > 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: ~~~js var inNoteElement = document.getElementById('inNote'); function noten() { var eingabe = parseInt(inNoteElement.value); ~~~ Hier setzen wir das Semikolon von oben ans Ende. ;-) > ~~~js > 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: ~~~js 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]`{: .language-js} Oder ein Dummyfeld als voranstellen: ~~~js var bedeutung = ["", "Sehr gut", "Gut", "Befriedigend", "Ausreichend", "Mangelhaft", "Ungenügend"]; ~~~ Dann `bedeutung[eingabe]`{: .language-js}. (Ich bevorzuge die erste Variante.) > ~~~js > 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. > ~~~html, good > <label for="inNote">Bitte Schulnote (als Dezimalzahl) eingeben: </label> > ~~~ Ja, so soll das. > ~~~html > <input type="number" id="inNote" min="0" step="1" > > ~~~ Wieso `min="0"`? Du hast `max="6"` vergessen? > ~~~html > <input type="button" value="Wasfuer1Note?" onClick="noten()"> > ~~~ Für Buttons gibt es in HTML das `button`-Element: `<button onClick="noten()">Wasfuer1Note?</button>`{: .language-html} Besser wäre jedoch, JavaScript und HTML nicht zu mischen, also kein `onclick`-Attribut (warum CamelCase?) zu verwenden, sondern den [Eventhandler mit JavaScript registrieren](http://molily.de/js/event-handling-fortgeschritten.html#dom-events). > ~~~html > <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](https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/forms/elements) nehmen. LLAP 🖖 -- _„Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“_ —Johann Wolfgang von Goethe
nicht angemeldet nicht angemeldet
