JS Lektion 2: Input-Elemente

Eine Webapplikation bietet in der Regel mehr Interaktionsmöglichkeiten als nur das Anklicken von Buttons.

In HTML5 stehen uns zahlreiche Input-Elemente zur Verfügung, mit denen der Nutzer eine Eingabe vornehmen kann.

Beispiel

Ein Input-Tag mit dem Typ “Text” erzeugt ein Eingabefeld, in das der Nutzer Text eintippen kann:

<input type="text"></input>

Ergebnis

 
Wir möchten Input-Elemente mit Javascript auslesen und die eingegebenen Daten in irgendeiner Weise verarbeiten.
 
Wir betrachten folgende Aufgabenstellung:

  1. Auf der Webseite soll sich ein Eingabefeld befinden, in das der Nutzer seinen Namen eintragen kann.
  2. Weiter unten soll eine Begrüßung in der Form “Hallo name, schön dass Du hier bist!” angezeigt werden, wobei statt name der vom Nutzer eingetragene Name eingesetzt werden soll.

Lösung Teil 1 (HTML-Code):

<input id="eingabe" type="text"></input>

<button onclick="submit()">Übernehmen</button>

<p id="ausgabe"></p>

Lösung Teil 2 (Javascript-Code):

function submit(){

 document.getElementById("ausgabe").innerHTML = "Hallo " + document.getElementById("eingabe").value + ", schön dass Du hier bist!";
 
}

Lösung Javascript-Code Variante 2 (statt “input” können Sie auch jeden anderen Variablennamen verwenden):

function submit(){
 
 var input = document.getElementById("eingabe");

 document.getElementById("ausgabe").innerHTML = "Hallo " + input.value + ", schön dass Du hier bist!";
 
}

Das Beispiel auf CodePen: http://codepen.io/HSZG-Frontend-Kurs/pen/LWqOxq?editors=1010

Erklärung zum Beispiel
Mit der DOM-Funktion document.getElementById(“eingabe”) greifen wir auf das Input-Element zu.

Über die Eigenschaft “value” greifen wir auf den Inhalt des Input-Elements, d.h. auf den eingegebenen Text zu.

Den eingegebenen Text fügen wir in den Begrüßungstext ein und weisen ihn der Eigenschaft “innerHTML” vom p-Element zu.
 
Natürlich können wir auch beliebigen HTML-Code in das innerHTML einbauen. Probieren Sie z.B. folgendes aus:

document.getElementById("ausgabe").innerHTML = "Hallo " + "<i>" + input_element.value + "</i>" + ", schön dass Du hier bist!";

oder

document.getElementById("ausgabe").innerHTML = "<h3>" + "Hallo " + input.value + ", schön dass Du hier bist!" + "</h3>;

Erweiterung: Wenn der Nutzer nichts in das Eingabefeld einträgt, soll anstelle der Begrüßung die Meldung “Bitte gib Deinen Namen ein!” angezeigt werden.

function submit(){
 
 var input = document.getElementById("eingabe");
 
 if(input.value==""){
    document.getElementById("ausgabe").innerHTML = "Bitte gib Deinen Namen ein!";
 }else{
    document.getElementById("ausgabe").innerHTML = "Hallo " + inputElement.value + ", schön dass Du hier bist!";
 }
}

 
Beispiel 2

Der Text, der in ein Eingabefeld eingegeben wird, kann z.B. verwendet werden, um CSS-Eigenschaften zu modifizieren.

Wir verändern den HTML-Code der Seite wie folgt:

<input id="eingabe" type="text"></input>

<button onclick="submit()">Übernehmen</button>

<div style="width: 50%; height: 500px" id="ausgabe"></div>

In diesem Beispiel soll der eingegebene Text als Hintergrundfarbe des Divs interpretiert werden. Die Submit-Funktion sieht dann wie folgt aus:

function submit(){
 var input = document.getElementById("eingabe");
 
 var farbe = input.value;
 
 document.getElementById("ausgabe").style.backgroundColor = farbe;
 
}

Das Beispiel auf CodePen: http://codepen.io/HSZG-Frontend-Kurs/pen/JWxOpx?editors=1010
 
Beispiel 3

Bisher haben wir immer ein Input-Element mit dem Typ “text” verwendet. Es gibt auch andere Input-Elemente. Sie unterscheiden sich hinsichtlich des angegebenen type-Attributs.

Liste aller Input-Typen: https://developer.mozilla.org/de/docs/Web/HTML/Element/Input

Ein Input mit dem Typ “color” erzeugt einen Color-Picker. Wir ändern den Typ in dem oben gezeigten Beispiel:

<input id="eingabe" type="color"></input>

Der restliche HTML- und Javascript-Code kann unverändert bleiben.

Das Beispiel auf CodePen: http://codepen.io/HSZG-Frontend-Kurs/pen/Zewamj?editors=1010

Wir merken uns: Der Inhalt eines Input-Elements kann immer mit der Eigenschaft “value” abgefragt werden, unabhängig vom Typ des Inputs.
 
Beispiel 4

Anstelle eines Input-Elements kann auch eine Textarea verwendet werden. Textareas sind mehrzeilige Eingabefelder. Sie erlauben die Eingabe von größeren Texten.

<textarea id="eingabe"></textarea>

Das Beispiel auf CodePen: http://codepen.io/HSZG-Frontend-Kurs/pen/ZewvMg
 

Aufgabe 1

Öffnen Sie die Datei aus Lektion 1, Aufgabe 6.

Fügen Sie im HTML-Code

  • ein Input-Element mit einer ID,
  • einen Button mit der Aufschrift “Überprüfen” und
  • ein leeres p-Element mit einer ID ein.

Der Nutzer soll die Antwort auf die Frage in das Eingabefeld eingeben. Beim Klick auf den Button “Überprüfen” soll im leeren p-Element die Aussage

  • “Die Antwort April ist richtig!” (wenn der Nutzer “April” eingegeben hat) oder
  • “Die Antwort xy ist falsch!” (wenn der Nutzer etwas anderes eingegeben hat)

erscheinen. Anstelle von xy soll die vom Nutzer eingegebene Antwort eingefügt werden.

Musterlösung:
 

Aufgabe 2

Öffnen Sie die Seite todo.html im Editor.

Sie dürfen auch in CodePen arbeiten (“Fork” nicht vergesssen):

https://codepen.io/HSZG-Frontend-Kurs/pen/wJNmQJ?editors=1010

Die Seite soll sich so verhalten wie in folgendem GIF:

todo

Hinweis: Generieren Sie “li”-Tags. Denken Sie daran, statt = den Operator += zu verwenden (siehe Lektion 1)!
 

Musterlösung:

Aufgabe 3

Erzeugen Sie eine Kopie von der Lösung aus Aufgabe 3 in Lektion 1.

Ändern Sie die Beschriftung des ersten Buttons von “Bild vergrößern” zu “Bildgröße ändern”.

Ergänzen Sie ein Input-Element (type=”number”) vor dem Button “Bildgröße ändern”. Der Nutzer kann eine Zahl in das Input-Element eingeben.

Beim Klick auf den Button “Bildgröße ändern” soll die Bildbreite auf die vom Nutzer eingegebene Zahl eingestellt werden. Verwenden Sie die Eigenschaft “.style.width”!

Zusatz: Fügen Sie ein Input vom type “range” ein (Schieberegler), mit dem der Nutzer die Bildgröße skalieren kann. Verwenden Sie die Attribute “min” und “max”, um die minimale bzw. maximale einstellbare Bildbreite festzulegen. Verwenden Sie im Input-Tag das “oninput”-Ereignis: Es wird ausgelöst, sobald der Nutzer den Regler bewegt. Legen Sie eine Funktion fest, die die Bildgröße anpasst, sobald das Ereignis auftritt.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range

https://www.w3schools.com/jsref/event_oninput.asp

Zusatz: Verwenden Sie das Ereignis “onchange” anstelle von “oninput”. Welchen Unterschied bemerken Sie?

https://www.w3schools.com/jsref/event_onchange.asp

Musterlösung:


Comments are closed.