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

[Marie]

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.“ Die Box soll beim Klick auf Text wieder unsichtbar werden. Die Box soll Farbe ändern, wenn man mit der Maus drauf fährt.

Weiter soll die Seite ein Textfeld erhalten, in das der Betrachter seinen Namen eingeben kann. Klickt er auf einen daneben befindlichen Button, so soll in einem „Alert“ ‘Hallo Name‘ angezeigt werden. Das soll mit „document. getElementById“ gelöst werden ...

[JürgenB]

Hallo,

… Das soll mit „document. getElementById“ gelöst werden ...

nur? Oder darf es noch etwas mehr sein?

Gruß
Jürgen

PS Wann muss es denn gelöst sein?

PPS Ein Blick in https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Formulare/Eingaben_mit_JavaScript_auswerten könnte helfen.

[MArie]

Hallo Jürgen,

darf auch gern mehr sein, so ich es als Anfänger dann noch verstehe! 😀

Und hat noch Zeit, nicht dringend ...

Viele Grüße, Marie

[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

[Felix Riesterer]

Liebe Marie,

wer verlangt das von Dir und welche Hilfsmittel hat dieser Jemand Dir an die Hand gegeben?

Wir haben da übrigens ein Tutorial zu modalen Dialogfenstern. Dort solltest Du wirklich alles dazu finden.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Wir haben da übrigens ein Tutorial zu modalen Dialogfenstern. Dort solltest Du wirklich alles dazu finden.

Nein. Wirklich nicht. Das Wichtigste fehlt: die showModal()-Methode.

Es wird zwar die show()-Methode erwähnt, die nicht-modale Dialogfenster öffnet, von showModal() für modale Dialogfenster aber keine Spur.

☞ TIL about showModal

☞ Beispiel: Lightbox

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo ,

okay, ein <I> steht zum Verkauf:

• https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Eigene_modale_Dialogfenster
• https://wiki.selfhtml.org/wiki/HTML/Tutorials/dialog

abgleichen und zusammenführen - oder begründen, warum es 2 sind…

Rolf