Message Box Probleme

[hawkmaster]

Hallo zusammen,
ich versuche mich gerade an eine CSS Message Box.
Folgendes CSS:

  
.msgbox {  
    display: none;  
 position: absolute;  
    top: 100px;  
    left: 200px;  
    width: 20em;  
    background-color: #b00;  
    border: 1px solid #333;  
    color: #fff;  
    font-weight: bold; }  
.msgbox p {  
    margin: 0;  
    padding: 5px 10px; }  
.msgbox a.close {  
    float: right;  
    text-decoration: none;  
    font-weight: bold;  
    color: #333;  
    background-color: #fff;  
    border-left: 1px solid #333;  
    border-bottom: 1px solid #333;  
    padding: 0 4px;  
    margin-left: 5px; }  

Auf der Seite wird ein Div platziert.

  
<div id="message-1" class="msgbox">  
 <a href="#" class="close"  
onclick="closeBox('message-1'); return false;"  
title="Close This">X</a>  
<p>THIS IS MY MESSAGEs </p>  

Der Javascript Code dazu um die Box zu laden und zu schließen:

  
function closeBox(toClose) {  
    document.getElementById(toClose).style.display = "none";  
}  
function loadMsg(msgClass) {  
    msg = document.getElementsByTagName("div");  
    for (i=0; i<msg.length; i++) {  
        if(msg[i].className == msgClass) {  
                msg[i].style.display = "block";  
 }  
    }  
}  

Soweit klappt alles. Mit
loadMsg('msgbox');
erscheint die Meldung "THIS IS MY MESSAGEs" und mit einem Click auf X wird sie geschlossen.
Jetzt würde ich aber gerne unterschiedliche Meldungen ausgeben, also keinen fixen Text im Div. Daher dachte ich, man könnte einfach der Funktion den gewünschten Text übergeben.
Also loadMsg('msgbox','Induvisueller Text');

Und dann in der Funktion mit "innerHTML" den Text ausgeben. AUch das klappt noch. Das Problem ist aber, daß einfach nicht mehr das "X" in der MsGbox erscheint. Man kann also die Meldung nicht mehr schließen.
Ich habe es auch versucht mit zusätzlichem "<p>" aber auch das brachte keine Änderung.

  
function loadMsg(msgClass,text) {  
    msg = document.getElementsByTagName("div");  
    for (i=0; i<msg.length; i++) {  
        if(msg[i].className == msgClass) {  
                msg[i].style.display = "block";  
  //msg[i].innerHTML = "<p>" + text + "</p>";  
  msg[i].innerHTML = text ;  
        }  
    }  
}  

Warum geht das so nicht und nur mit fixem Text im Div?
Wie könnte man das ändern?

vielen Dank und viele Grüße
hawk

[Hopsel]

Hi hawkmaster!

Warum geht das so nicht und nur mit fixem Text im Div?

Mit innerHTML überschreibst du alles was im Element vorhanden ist.

Wie könnte man das ändern?

Nutze entweder innerHTML für ein fest vorgegebenes Element, dass den Text enthalten soll oder erzeuge ein neues Element mit entsprechendem Text und füge es im <div> ein.
Es gibt auch noch andere Möglichkeiten. Wichtig ist, dass du den schon vorhanden Inhalt der Messagebox nicht überschreibst.

Außerdem wäre es sinnvoll, die Messagebox komplett per Javascript zu erzeugen. Schließlich wird sie auch nur mit aktiviertem Javascript angezeigt.
Ein guter Einstieg wäre die <http://de.selfhtml.org/javascript/objekte/node.htm@title=Beschreibung zu node>.

MfG H☼psel

[hawkmaster]

Hallo,

Außerdem wäre es sinnvoll, die Messagebox komplett per Javascript zu erzeugen. Schließlich wird sie auch nur mit aktiviertem Javascript angezeigt.

so jetzt habe ich mal versucht das DIV und alles direkt per Javascript zu erstellen.

Also was vorher fest auf dem Form war:

  
<div id="message-1" class="msgbox_info">  
 <a href="#" class="close" onclick="closeBox('message-1'); return false;" title="Close This">X</a>  
 <div id="msgbox_text">  
 </div>  
</div>  

versuche ich nun mit JS:

  
function loadMsg(msgClass,text) {  
if(!document.getElementById('message-1')){//prüfen ob div schon da  
   msgtextdiv = "<div id=\"msgbox_text\">";  
   msginfo = text;  
   msgtextdiv1 = "</div>";  
   alltext = msgtextdiv + msginfo + msgtextdiv1;  
  
   varobj = document.createElement ("div");  
      varobj.id = "message-1";  
      varobj.class = "msgbox_info";  
   document.body.appendChild (varobj);  
varobj.innerHTML = alltext;  
    var GesamtDiv = document.getElementById("message-1");  
    GesamtDiv.style.display = "block";  
  
 } else {  
   varobj = document.getElementById("message-1"); // Objekt bereits da  
 }  
  

Aber irgendwie klappt das nicht so recht.
Kann mir jemand sagen wie man das am besten per Javascript macht?
vielen Dank und viele Grüße
hawk

[levu]

Hallo,

Werden irgendwelche Fehler angezeigt?

mfg, Flo