BananaMaster

8 - Input value ( type number ) in JavaScript ( += )

Falls du etwas vergessen hast — klicke, um zur Lektion zurückzukehren.

Task 1.

Erstelle zwei Variablen y1 = 6, y2 = 3. Erstelle ein div (Klasse frei wählbar), gib darin die Summe von y1 und y2 aus.

Task 2.

Erstelle ein div mit dem Text 'Hello' und der Klasse .out-2. Füge mit innerHTML den Text "Master" hinzu. Am Ende sollte stehen: Hello Master. (Kurzschreibweise verwenden)

Task 3.

Erstelle ein input und einen Button. Beim Klick auf den Button wird eine Funktion ausgeführt, die die vom Benutzer eingegebene Zahl mal 10 auf der Seite ausgibt.

Input i-3

Task 4.

Erstelle ein input, einen Button und ein leeres div mit der Klasse .out-4. Beim Klick auf den Button wird eine Funktion ausgeführt, die im div ein neues Tag <h1> mit dem vom Benutzer eingegebenen Text ausgibt (<h1>Text Input</h1>). Verwende dafür String-Verkettung ('<h1>' + ...).

Input i-4

Task 5.

Erstelle zwei input mit type="number", in die der Benutzer Zahlen eingeben kann. Beim Klick auf den Button soll eine Funktion ausgeführt werden, die die Summe der eingegebenen Zahlen auf der Seite ausgibt.

Input i_5_1
Input i_5_2

Task 6.

Erstelle ein input, einen Button und ein leeres div mit der Klasse .out-6. Der Benutzer gibt Text in das input ein. Beim Klick auf den Button wird eine Funktion ausgeführt, die im div ein neues Tag <p> mit dem eingegebenen Text hinzufügt (<p>Text Input</p>). Verwende String-Verkettung ('<p>' + ...) und Kurzschreibweise. Wichtig: Der Text soll wirklich hinzugefügt werden. Klickt man mehrmals, soll jedes Mal neuer Text hinzukommen.

Input i-6

Task 7.

Erstelle ein input und einen Button. Beim Klick auf den Button wird eine Funktion ausgeführt, die auf der Seite in einem div die vom Benutzer eingegebene Zahl plus die Zahl 10 ausgibt.

Hinweis: Achte auf den Datentyp

Input

Task 8.

Erstelle ein input, einen Button und eine leere Liste <ul> mit der Klasse .out-8. Der Benutzer gibt Text in das input ein. Beim Klick auf den Button wird eine Funktion ausgeführt, die ein neues Tag <li> mit dem eingegebenen Text erstellt und zur Liste hinzufügt. Verwende String-Verkettung ('<li>' + ...) und Kurzschreibweise. Wichtig: Jeder neue Klick fügt ein neues Element zur Liste hinzu.

Input i-8

Task 9.

Erstelle ein input mit type="number" und einen Button mit dem Text 1. Beim Klick auf den Button wird eine Funktion ausgeführt, die die vom Benutzer eingegebene Ziffer zum Text des Buttons hinzufügt. Klickt man mehrmals auf den Button, soll jedes Mal eine neue Ziffer zum bereits geänderten Wert hinzukommen.

Hinweis: Achte auf den Datentyp

Input

Task 10.

Hole mit querySelector das Tag body ( querySelector('body') ). Weise ihm mit innerHTML eine leere Zeichenkette zu (...innerHTML = ''). Beobachte, was passiert.