onclick: div erzeugen/löschen

[northon]

Guten Tag allerseits!

Ich habe folgende Aufgabenstellung:

Per Onclick rufe ich eine function namens Test auf:

  
 function test(v,w)  
 {var box;  
  var auswahlbox = document.getElementById('auswahlbox');  
  if (box)  
  {  
   auswahlbox.removeChild(box);  
  }  
  
  else  
  {  
    auswahlbox.innerHTML='-'+ w;  
    box=document.createElement('div');  
    auswahlbox.appendChild(box);  
    box.style.border="solid black 2px";  
    box.innerHTML = v;  
  }  
  
  
 }  

Diese Funktion soll eine InfoBox einblenden, bzw beim 2. Klick wieder ausblenden. Da ich mehrere Infoboxen haben will, (jedoch nicht zur gleichen Zeit, sondern nur an verschiedenen Stellen) muss ich per removeChild() immer erst die eine Infobox löschen.

Ich habe es mir wie oben ersichtlich vorgestellt, das erzeugen an sich klappt, das removen leider nicht.

Somit bitte ich euch um Hilfe,
mit freundlichen Grüßen

Northon

[Sympatisant]

Salvete,

[code lang=javascript]
function test(v,w)
{var box;
  var auswahlbox = document.getElementById('auswahlbox');
  if (box)

Diese Abfrage wird immer false sein, da zu diesem Zeitpunkt noch
keine Initialisierung der Variable stattgefunden hat.

MfG,
Sympatisant

[northon]

function test(v,w)
{var box;
  var auswahlbox = document.getElementById('auswahlbox');
  if (box)
Diese Abfrage wird immer false sein, da zu diesem Zeitpunkt noch
keine Initialisierung der Variable stattgefunden hat.

Vielen Dank für deine schnelle Antwort!

Wenn ich den Code jedoch dorthingehend ausbessere, dass ich "box" global definiere, funktioniert zwar das "löschen" des Elementes, jedoch kann ich es dann nicht mehr neu erzeugen, da "box" immer gesetzt ist.

Fallen dir da irgendwelche Alternativen ein? Ich möchte ungern immer eine Variable setzen/zurücksetzen...

Hier nochmal der Code dazu:

[code lang=javascript]

var box;

function test(v,w)
{
  var auswahlbox = document.getElementById('auswahlbox');
  if (box)
  {
   auswahlbox.removeChild(box);
  }

else
  {
    auswahlbox.innerHTML='-'+ w;
    box=document.createElement('div');
    auswahlbox.appendChild(box);
    box.style.border="solid black 2px";
    box.innerHTML = v;
  }

}

[Beat]

Wenn ich den Code jedoch dorthingehend ausbessere, dass ich "box" global definiere, funktioniert zwar das "löschen" des Elementes, jedoch kann ich es dann nicht mehr neu erzeugen, da "box" immer gesetzt ist.

Viele Boxen = viele Variablen.
Speichere doch die Box als Element eines Arrays mit dem ID Namen...

mfg Beat

[northon]

Wenn ich den Code jedoch dorthingehend ausbessere, dass ich "box" global definiere, funktioniert zwar das "löschen" des Elementes, jedoch kann ich es dann nicht mehr neu erzeugen, da "box" immer gesetzt ist.

Viele Boxen = viele Variablen.
Speichere doch die Box als Element eines Arrays mit dem ID Namen...

mfg Beat

Vielen herzlichen Dank für Eure Tipps!

SelfHTML - Da wird einem geholfen ;)

Schönen Tag noch
mit freundlichen Grüßen
Northon

[Sympatisant]

Salvete,

ich muss gestehen, ich verstehe deine Herangehensweise nicht so recht.
Wie auch immer, in deinem Beispiel kannst du die box-Variable nach
dem removeChild-Aufruf auf null setzen. Damit beim naechsten Aufruf
das Div wieder gezeichnet wird.

  
function test(v,w)  
{  
  var auswahlbox = document.getElementById('auswahlbox');  
  if (box)  
  {  
     auswahlbox.removeChild(box);  
     box = null;  
  }  
  

MfG,
Sympatisant

[Beat]

function test(v,w)
{var box;

falscher Scope

var auswahlbox = document.getElementById('auswahlbox');
  if (box)
  {
   auswahlbox.removeChild(box);
  }

else
  {

...

}

  

> Ich habe es mir wie oben ersichtlich vorgestellt, das erzeugen an sich klappt, das removen leider nicht.  
  
klar, weil var box im Scope der Funktion stets neu mit undef initialisiert wird.  
  
mfg Beat

-- 
Woran ich arbeite:  
[X-Torah](http://www.elcappuccino.ch/cgi/tok.pl?extern=1-pub-com3306-1)  

><o(((°>       ><o(((°>  

   <°)))o><                      ><o(((°>o