[GELÖST] [JavaScript/HTML/CSS] Aufklappbares Div erzeugen?

Übersicht Andere Programmiersprachen Allgemein

Neue Antwort erstellen

 

CO2

ehemals "SirMO"

Betreff: [GELÖST] [JavaScript/HTML/CSS] Aufklappbares Div erzeugen?

BeitragSo, Apr 21, 2013 13:14
Antworten mit Zitat
Benutzer-Profile anzeigen
Hallo,
ich versuche mich momentan an JavaScript in Verbindung mit HTML... Dabei habe ich folgendes Problem: Ich möchte als Übung ein kleines Gästebuch schreiben (Ohne Anmeldung, etc. einfach nur Autor und Text eingeben und "Absenden" klicken. Die Einträge sollen vorerst auch nicht in einer Datenbank gespeichert werden.)
Nun habe ich das wie folgt gemacht: Es gibt zum einen ein Div, in dem später alle Einträge des Gästebuches stehen sollen. Zudem gibt es darunter einen Button, welcher dafür sorgen soll, das ein darunter liegendes Div aufgeklappt wird und eine Eingabemaske mit Autor und Text enthält. Dies ist mit das größte Problem: Ich kriege es nicht hin, dass sich das Div aufklappt...
Hinzu kommt noch, dass man die Einträge kommentieren können soll. Also erhält jeder Eintrag eine fortlaufende ID, sowie einen Button "Auf Beitrag antworten". Klickt man auf diesen Button soll sich einen weiteres Div - ebenfalls mit einer Eingabemaske - öffnen. Auch dies funktioniert nicht. Ich weiß nicht woran es liegen könnte... Google spuckt nichts richtiges aus.

Hier mal der Code:
Gaestebuch.htm Code: [AUSKLAPPEN]
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
      <title>Gästebuchtest</title>
      <link href="css/style.css" rel="stylesheet" type="text/css" />
      <script type="text/javascript">
         var activeID = 0;
         var id = 0;
         
         function setMomID(var ID)
         {
            activeID = ID;
            OpenAnswerDiv();
         }
         
         function OpenCommentDiv()
         {
            if(document.getElementById("CommentDiv").style.visibility == 'hidden')   //geschlossen
            {
               document.getElementById("CommentDiv").style.visibility = 'visible';
            }
            else         //offen
            {
               document.getElementById("CommentDiv").style.display = 'hidden';
            }
         }
         
         function OpenAnswerDiv()
         {
            if(document.getElementById("AnswerDiv").style.display == 'none')
            {
               document.getElementById("AnswerDiv").style.display = 'block';
            }
            else
            {
               document.getElementById("AnswerDiv").style.display = 'none';
            }
         }
         
         function answerPost()
         {
            var Answer = document.getElementById("PostAnswer").value;
            var Author = document.getElementById("AnswerAuthor").value;
            if(Answer != "" && Answer != "Schreibe etwas...")
            {
               if(Author == "")
               {
                  Author = "Anonym";
               }
               document.getElementById(activeID).getElementById("answers").innerHTML = document.getElementById(activeID).getElementById("answers").innerHTML + "<div class='postanswer'><h3>" + Date() + "; Autor: " + Author + ":</h3><br>" + Answer + "</div>";
            }
         }
      
         function postComment()
         {
            var Comment = document.getElementById("comment").value;
            var Author = document.getElementById("author").value;
            if(Comment != "" && Comment != "Schreibe etwas...")
            {
               if(Author == "")
               {
                  Author = "Anonym";
               }
               document.getElementById("posts").innerHTML = document.getElementById("posts").innerHTML + "<div class='post' id='" + id + "'><h3>" + Date() + "; Autor: " + Author + ":</h3><br>" + Comment + "<br><br><div align='center' id='answers'></div><div align='center'><input type='submit' value='Antworten' onclick='setMomID('" + id + "')'/></div></div>";
               id++;
               document.getElementById("comment").value = "Schreibe etwas...";
               document.getElementById("author").value = "Anonym";
               if(statusAnswer = 1) //sichtbar
               {
                  document.getElementById("CommentDiv").style.display = 'none';
                  statusAnswer = 0;
               }
            }
            else
            {
               alert("Du musst eine Nachricht eingeben!");
            }
         }
      </script>
   </head>
    <body>
      <div class="main">
         <div align="center">
            <img src="data\img\header.png"/>
         </div>
         <hr>
         <div align="center" id="posts">
            <h2>Kommentare</h2>
            <!-- POSTS -->
            <br><br>
         </div>
         <div align="center">
               <input type="submit" value="Kommentar schreiben" onclick="OpenCommentDiv()"/>
         </div>
         <hr>
         <div align="center" id="FormDiv">
            <form id="CommentDiv" style="display: none;">
               Autor (optional): <br>
               <input type="text" id="author" value="Anonym" style="width: 668px;"/><br>
               Kommentar: <br>
               <textarea id="comment" cols="80" rows="10">Schreibe etwas...</textarea><br>
               <input type="submit" onclick="postComment()" value="Veröffentlichen"/>
            </form>
            <form id="AnswerDiv" style="display: none;">
               Autor (optional): <br>
               <input type="text" id="AnswerAuthor" value="Anonym" style="width: 668px;"/><br>
               Antwort: <br>
               <textarea id="PostAnswer" cols="80" rows="10">Schreibe eine Antwort...</textarea><br>
               <input type="submit" onclick="answerPost()" value="Veröffentlichen"/>
            </form>
         </div>
      </div>
   </body>
</html>


Die dazugehörige CSS-Datei:
style.css Code: [AUSKLAPPEN]
body
{
   font-family: "Arial";
   font-size: 12px;
   color: #F60;
   background-color: #333;
}
h1
{
   font-size: 16px;
   color: #F30;
   background-color: #333;
   text-align: center;
}
h2
{
   font-size: 14px;
   color: #F30;
   background-color: #333;
   text-decoration: underline;
   text-align: center;
}
h3
{
   font-size: 12px;
   color: #000;
   background-color: #FFF;
   font-style: italic;
   text-align: left;
   margin-top: 0px;
   margin-bottom: 3px;
}
button
{
   margin-right: auto;
   margin-left: auto;
}

.main
{
   padding: 5px;
   margin-right: auto;
   margin-left: auto;
   border: 1px solid #FFF;
   width: 800px
}
.post
{
   margin-right: auto;
   margin-left: auto;
   color: #000;
   background-color: #FFF;
   border: 1px solid #F30;
   text-align: left;
   margin-bottom: 5px;
   padding: 2px;
}
.postanswer
{
   margin-right: auto;
   margin-left: auto;
   color: #000;
   background-color: #CCC;
   border: 1px solid #F30;
   text-align: left;
   margin-bottom: 5px;
   padding: 2px;
   width: 750px;
}


Wie bekommt man aufklappbare Div-Boxen hin? Ich hoffe jemand kann mir helfen.
mfG, CO²

Sprachen: BlitzMax, C, C++, C#, Java
Hardware: Windows 7 Ultimate 64-Bit, AMX FX-6350 (6x3,9 GHz), 32 GB RAM, Nvidia GeForce GTX 750 Ti
  • Zuletzt bearbeitet von CO2 am Mo, Apr 22, 2013 13:56, insgesamt einmal bearbeitet

Holzchopf

Meisterpacker

BeitragSo, Apr 21, 2013 13:26
Antworten mit Zitat
Benutzer-Profile anzeigen
Beim ersten Drüberschauen fällt mir auf, dass du versuchst die Display-Eigenschaft des form-Elements zu ändern, was dir aber nichts bringen wird, weil <form> keine Ausgabe erzeugt, sondern nur Kontainer ist, um Formular-Elemente zu grupieren. Erstelle ein umschliessendes <div> und gib dem die Id AnswerDiv.

mfG
Holzchopf
Erledige alles Schritt um Schritt - erledige alles. - Holzchopf
CC BYBinaryBorn - Yogurt ♫ (31.10.2018)
Im Kopf da knackt's und knistert's sturm - 's ist kein Gedanke, nur ein Wurm

Xeres

Moderator

BeitragSo, Apr 21, 2013 13:27
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich würde als erstes mal jquery empfehlen - deutlich übersichtlicher und komfortabler.
Was ist das Problem mit dem Aufklappen? Einfach das CSS zwischen display:none; und display:block; hin und her schalten - mit JQuery könnt's man auch noch etwas animieren.
Win10 Prof.(x64)/Ubuntu 16.04|CPU 4x3Ghz (Intel i5-4590S)|RAM 8 GB|GeForce GTX 960
Wie man Fragen richtig stellt || "Es geht nicht" || Video-Tutorial: Sinus & Cosinus
T
HERE IS NO FAIR. THERE IS NO JUSTICE. THERE IS JUST ME. (Death, Discworld)

ZEVS

BeitragSo, Apr 21, 2013 15:50
Antworten mit Zitat
Benutzer-Profile anzeigen
@Xeres: Dein Vorschlag ist kurzfristig sicherlich die richtige Alternative, wenn CO2 aber JavaScript lernen möchte, ist dies ein Schummelweg, wie ich finde.
@HC: Sollte auch so klappen.
@CO2: Ich musste einiges ändern, um dein Programm zum Laufen zu bringen:
- Der Wechsel zwischen visibility und display öffnet Tür und Tor für Fehler. Lege dich auf eins fest.
- Zitat:
function setMomID(var ID)

Streiche das var weg, dann hast du einen Syntaxfehler weniger.
- Zitat:
document.getElementById(activeID).getElementById("answers")

Ein bisschen viel des "Guten". Nimm das letzte getElementById raus.
- Zitat:
document.getElementById("posts").innerHTML = document.getElementById("posts").innerHTML + "[...] onclick='setMomID('" + id + "')'[...]";

Sehr unübersichtlich und daher fehleranfällig. Wenn du z.B. id=1 hast, ist das Ergebnis Code: [AUSKLAPPEN]
onclick='setMomID('1')'

Nimm die inneren Anführungszeichen lieber raus.
- Zitat:
<input type="submit" onclick="postComment()" value="Veröffentlichen"/>
(hast du in zwei Varianten)
Wenn du hiermit etwas absendest, werden die Informationen an den Server gesendet und die Seite neu geladen => alles weg. Ändere lieber submit nach button.

Mit diesen Änderungen läuft es bei mir. Ich empfehle allgemein einen JavaScript-Debugger, für FF ist das Firebug.

ZEVS
 

CO2

ehemals "SirMO"

BeitragMo, Apr 22, 2013 13:56
Antworten mit Zitat
Benutzer-Profile anzeigen
Entschuldigung, dass ich jetzt erst antworte...

Ich danke für die helfenden Antworten! Funktioniert nun.
@ Holzchopf: Stimmt, habe ich geändert.
@ Xeres: Schau ich mir mal an.
@ ZEVS: Habe alles geändert und funktioniert einwandfrei.
mfG, CO²

Sprachen: BlitzMax, C, C++, C#, Java
Hardware: Windows 7 Ultimate 64-Bit, AMX FX-6350 (6x3,9 GHz), 32 GB RAM, Nvidia GeForce GTX 750 Ti

Neue Antwort erstellen


Übersicht Andere Programmiersprachen Allgemein

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group