Button mit Text-Alert und Textfeld durch document. getElementById erzeugt ...

[Matthias Scharwies]

Servus!

Könnt Ihr mir bitte bei folgenden Aufgaben helfen. Komme da nicht weiter:

Füge der Webseite einen Button hinzu, bei dessen Betätigung eine Box erscheint, die den Text anzeigt: „Keine Funktion. Bitte schließen.“

So etwas kannst du mit JavaScript erreichen. Wie man Elemente erzeugt und wieder entfernt, lernst du hier:

• JavaScript/Tutorials/DOM/DOM-Manipulation

Die Box soll beim Klick auf Text wieder unsichtbar werden.

Eher entfernt werden, oder? Dieser Text, auf den du klicken kannst, sollte ein Button werden, der dann auch eine Funktion auslösen - nämlich das Entfernen - kann.

Die Box soll Farbe ändern, wenn man mit der Maus drauf fährt.

Das geht ganz einfach mit CSS - ist aber eher sinnlos. Eigentlich sollten nur Interaktionselemente wie Links und Buttons ihren Status ändern, wenn man mit der Maus (oder einem digitalen Zeigestift) hovert (oder mit der Tastatur antabbt).

.box {    /* sollte aber eher ein Button mit dieser Klasse sein! */
  color: black; 
}

.box:hover,
.box:focus {
  color: something-else;
}

CSS/Tutorials/Einstieg

Weiter soll die Seite ein Textfeld erhalten, in das der Betrachter seinen Namen eingeben kann.

Also ein Eingabefeld, sprich input type="text"

Klickt er auf einen daneben befindlichen Button, so soll in einem „Alert“ ‘Hallo Name‘ angezeigt werden. Das soll mit „document. getElementById“ gelöst werden ...

So etwas ist ein kleines Formular, das du so erstellen kannst:

• HTML/Tutorials/Formulare/Was_ist_ein_Webformular?

Dann musst du bei einem Klick auf den Button ein JavaScript starten, das deine Eingabe verarbeitet, auswertet und als Gruß wieder ausgibt:

• JavaScript/Tutorials/Formulare/Eingaben_mit_JavaScript_auswerten

Herzliche Grüße

Matthias Scharwies