Daten zwischen Fenstern austauschen

Navigation: Startseite → Javascript → Aufgaben → 12_aufgabe_window

Daten zwischen Fenstern austauschen

Auf dieser Seite lernst du, wie du ein neues Browserfenster öffnest..

Jede HTML-Seite kann eine weitere Seite öffnen. Dabei können die Rahmenbedingungen (Adressleiste, Sichtbarkeit des Menüs, Größe der Seite) individuell angepasst werden.
Zusätzlich kann eine Variable zur neuen Seite übergeben werden.

Aufgabe:

Lade die Seite kleidung.htm.
Füge eine neue Tabellenspalte für die Überschrift Warenkorb hinzu ...
Lege in der nächsten Tabellenzeile ein zusätzliches Textfeld an.
Schreibe ein Script, das
- prüft, welcher Radiobutton angeklickt wurde.
- den passenden Text ...
- ... und das entsprechende Bild anzeigt.
Ein Klickauf den Button Warenkorb zeigt das gewählte Kleidungsstück im Textfeld Warenkorb an
Ein Klick auf den Button Bestellzettel öffnet ein neues Fenster und zeigt die ausgesuchten Artikel an.

Tipps:

Die Bilder:

Jeans Pullover T-Shirt Schuhe
Bilder und Text werden in einem Array erfasst.
Text und Bild werden nach einem Klick auf den Radiobutton angezeigt.

Ein Klick auf den Button Warenkorb führt die Funktion Warenkorb_Uebernehmen aus:

function Warenkorb_Uebernehmen()
{
   for (i=0;i<document.Kleidung.Marke.length;i++)
   {
      if (document.Kleidung.Marke[i].checked)

Sie überprüft zunächst, welcher Radiobutton aktiviert ist und schreibt dann den Wert des Buttons in die Variable Warenkorb_Inhalt.
Im Textfeld Warenkorb wird die Variable dann angezeigt.

      {
         Warenkorb_Inhalt=Warenkorb_Inhalt+document.Kleidung.Marke[i].value+"\n";
         document.Kleidung.Warenkorb.value=Warenkorb_Inhalt;
      }
   }
}

Ein Klick auf den Button Bestellzettel anzeigen öffnet ein neues Fenster und gestaltet das Fenster.

<input type="button" value="Bestellzettel anzeigen " onClick="window.open('warenkorb.htm','_blank','scrollbars=no,menu=no,width=600,height=300')">

Die Seite warenkorb.htm enthält ein Textfeld, in dem die Variable opener.Warenkorb_Inhalt angezeigt wird.

<form name="Anzeige">
   <textarea name="Warenkorb" rows="6" cols="45" readonly="readonly">
   </textarea>
</form>

Die Funktion opener sorgt für die Datenübergabe zwischen den Fenstern.

<body onload="document.Anzeige.Warenkorb.value=opener.Warenkorb_Inhalt">

© Hartmut Waller
Datei: https://hartmut-waller.info/javascript/aufgaben/12_aufgabe_window.php
Zuletzt geändert: 28. 11. 2019 17:07