dynamischer String

[Christian Seiler]

Hallo David,

Was Du brauchst, ist DHTML. Denn document.write() funktioniert *nur*, wenn das Dokument gerade noch geladen wird. Wenn das Dokument schon geladen ist, wird der *komplette* inhalt des Dokuments ersetzt. Um das zu realisieren, was Du willst, brauchst Du einen <div>. Dieser sollte absolut positioniert sein, zumindest, wenn Du Netscape 4 unterstützen willst.

<div id="produktliste"> </div>

in Deiner CSS-Datei kannst Du noch ein paar Styles anwenden, z.B. Positionsangaben.

Dann musst Du die Funktion schreib so umschreiben, dass sie den Inhalt des <div>s modifiziert. Es ist unglücklich, eine Variable string zu nennen, daher solltest Du sie lieber produkte_string o.ä. nennen. Folgender Code funktioniert unter IE 4+ (immer), NN 4 (sofern das <div> absolut positioniert ist), NN 6+ (immer), Mozilla (immer), Konqueror 2.2+ (immer) Er funktioniert nicht unter Opera, weil Opera kein innerHTML unterstützt. Desweiteren wird er auch nur funktionieren, wenn der Benutzer JavaScript eingeschaltet hat. Wenn so etwas mit allen Browsern funktionieren soll, dann solltest Du Dir etwas serverseitiges überlegen.

function schreibe ()
{
  if (document.getElementById && document.getElementById("produktliste")) {
    document.getElementById("produktliste").innerHTML = produkte_string;
  } else if (document.all && document.all["produktliste"]) {
    document.all["produktliste"].innerHTML = produkte_string;
  } else if (document.layers && document.layers["produktliste"]) {
    document.layers["produktliste"].document.open ();
    document.layers["produktliste"].document.write (produkte_string);
    document.layers["produktliste"].document.close ();
  }
}

var produkte_string = "";

Jetzt musst Du nur noch beim klicken auf einen Link den Inhalt von produkte_string füllen und dann die Funktion schreibe aufrufen.

Das könntest Du z.B. mit so erledigen:

-- JavaScript
function fuege_produkt_hinzu (produkt)
{
  // im Folgenden 2 Varianten:
  // nur eine Nehmen

// VAR1: wenn die Produkte jedes in einer Zeile stehen soll
  produkte_string += produkt + "<br />\n";

// VAR2: oder wenn die Produkte durch Kommas getrennt werden sollen
  if (produkte_string != "") {
    produkte_string += ", ";
  }
  produkte_string += produkt;

// das hier muss immer ausgeführt werden
  schreibe ();
}

-- HTML
<a href="#" onClick="javascript: fuege_produkt_hinzu ('Essig'); return false;">Essig</a>

Grüße,

Christian