div ausblenden

Stef · 24. April 2018

Hey,

ich möchte ein div-element ausblenden welches 2 Tabellenreihen besitzt.

Eigentlich sollte es nun mit document.getElementById("newUser").style.display = "none"; ja ausgeblendet werden. Aber das funktioniert nicht.

Ich bin gerade dazu etwas überfragt und kann an keiner Stelle in meinem JS-Code einen Fehler finden.

Mein JS und HTML:

JavaScript

window.onload = function(){

            var addNewUser = document.getElementById("addNewUser");
            var ausgabeBereich = document.getElementById("newUser");

            ausgabeBereich.style.display = "none";

            addNewUser.addEventListener("click", showFormular);

            function showFormular(){
                
                var ausgabeBereich = document.getElementById("newUser");
                ausgabeBereich.style.display = "block";
                
            }
        }

Alles anzeigen

Code

<div id="newUser">
                        <form method="post">
                            <tr>
                                <th scope="row" class="col-sm-1">#</th>
                                    <td class='col-sm-3'>
                                        <div class='form-group'>
                                            <input type='text' name='username' class='form-control'>
                                        </div>
                                    </td>
                                    <td class='col-sm-3'>
                                        <div class="form-group">
                                            <select name="rang" class="custom-select">
                                                <option value="" selected>-</option>
                                                  <option value="user">User</option>
                                                <option value="admin">Admin</option>
                                            </select> 
                                        </div>
                                    </td>
                                    <td class='col-sm-3'>
                                        <div class="form-group">
                                            <input type="password" name="passwort" class="form-control" placeholder="Passwort">
                                        </div>
                                    </td>
                                    <td class='col-sm-3'>
                                        <div class="form-group">
                                            <input type="password" name="passwort_wiederholung" class="form-control" placeholder="Passwort again">
                                        </div>
                                    </td>
                            </tr>
                            <tr>
                                <td>
                                    <button class="btn btn-success" name="submit">User hinzufügen</button>
                                </td>
                            </tr>
                        </form>
                    </div>

Alles anzeigen

Hoffe das ihr mir da weiterhelfen könnt.

Grüße,

Stef

basti1012 · 24. April 2018

wo ist den die id addNewUser?

und eine variable und eine id den gleichen namen zu geben ist auch keine gute idee ,wie ich mal gelesen habe

Stef · 24. April 2018

Hey,

Zitat

und eine variable und eine id den gleichen namen zu geben ist auch keine gute idee ,wie ich mal gelesen habe

Ja da hast du recht.

Zitat

wo ist den die id addNewUser

Dies ist irrelevant. Denn dieses div lässt sich ja garnicht ausblenden. Das Element mit der Id "addNewUser" hat erst eine Function wenn das div sich ausblenden lässt.

Sempervivum · 24. April 2018

Dein Code funktioniert bei mir, das Problem muss irgend wo anders liegen. Ein Kandidat ist das window.onload: Wird es irgend wo überschrieben?

Stef · 24. April 2018

Nein. Das window.onload wird nicht überschrieben. Jedenfalls sehe ich nichts wo dieses überschreiben kann.

Das komische ist auch, dass ich dieses nicht mal mit CSS ausblenden kann. Selbst nicht mit display: none !important;

Weiteres was ich mir nicht erklären kann ist, dass im Quellcode das div und das form rot markiert ist.

html-seminar.de/woltlab/attachment/1517/

Sempervivum · 24. April 2018

Zitat

Weiteres was ich mir nicht erklären kann ist, dass im Quellcode das div und das form rot markiert ist.

Der Grund ist, dass diese Elemente an dieser Stelle, zwischen </tr> und <tr> nicht zulässig sind. Innerhalb einer Tabelle nur in den Zellen. Du musst das Layout umstellen.

Sempervivum · 24. April 2018

PS: Bin ein wenig verunsichert: Mein Editor, den ich eigentlich als zuverlässig kenne, markiert dies nicht als Fehler, der W3C-Validator jedoch schon:

Zitat

Error: Start tag div seen in table.

From line 37, column 18; to line 38, column 17

</tr>↩ <div>↩

Fatal Error: Cannot recover after last error. Any further errors will be ignored.

From line 37, column 18; to line 38, column 17

</tr>↩ <div>↩

Alles anzeigen

Stef · 24. April 2018

Vielen Dank Sempervivum.

Ich habe das eben so erstellt, weil ich es so brauche. Dann muss ich, wie du bereits gesagt hast, dass ganze Layout nochmal überdenken.

Mit Tabellen zu arbeiten hasse ich eh.

Was man ja als Layout machen kann ist alles einfach ohne Tabelle zu erstellen.

Dann erstellt man eine Reihe und vergibt dann an die Begriffen eine Breite mittels col-sm-2 zum Beispiel.

Und für jede neue Ausgabe eine neue Reihe.

Ich setz mich dann mal dran und präsentiere später mein Ergebnis.

Stef · 24. April 2018

Ich habe das Layout jetzt geändert und es funktioniert alles wieder.

Es sieht so aus:

HTML

<div id="userForm">
                <form method="post">
                    <div class="row p-3">
                            <div class="col-sm-1">
                                <p></p>
                            </div>
                            <div class="col-sm-2">
                                <div class='form-group'>
                                    <input type='text' name='username' class='form-control' placeholder="Username">
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="form-group">
                                    <select name="rang" class="custom-select">
                                        <option value="" selected>-</option>
                                        <option value="user">User</option>
                                        <option value="admin">Admin</option>
                                    </select> 
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <input type="password" name="passwort" class="form-control" placeholder="Password">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <input type="password" name="passwort_wiederholung" class="form-control" placeholder="Password wiederholen">
                                </div>
                            </div>
                        
                    </div>
                    <div class="row">
                        <button class="col-12 btn btn-success" name="submit">User hinzufügen</button>
                    </div>
                </form>
            </div>

Alles anzeigen

Grüße,

Stef

Sempervivum · 24. April 2018

Zitat

es funktioniert alles wieder.

Bezieht sich das auch auf das Ausblenden? Ich war mir nämlich nicht ganz sicher, ob es an der Platzierung von div und form liegt, weil mein Editor es nicht als fehlerhaft erkannte.

Bootstrap für das Layout zu benutzen ist sicher eine gute Wahl, wenn Du gewohnt bist, damit zu arbeiten. Auf jeden Fall besser als ein Tabellenlayout.

Stef · 24. April 2018

Zitat

Bezieht sich das auch auf das Ausblenden?

Ja es bezieht sich auch darauf.

Man kann/darf ja in einem Formular div-elemente erstellen. Habe dazu vom W3C-HTML-Validator noch nie eine Meldung bekommen.

Aber das mit der Tabelle war vorher wirklich ein grober Fehler. Aufgrund diesen hat bestimmt alles gestreikt was sich auf dieses Element bezogen hat.

Zitat

Bootstrap für das Layout zu benutzen ist sicher eine gute Wahl, wenn Du gewohnt bist, damit zu arbeiten. Auf jeden Fall besser als ein Tabellenlayout.

Die Tabelle war ja eine Bootstrap-Tabelle. Aber ich brauchte in dieser das Formular und dann 2 Tabellenreihen für die Inputfelder und dem Button. Und da man das Formular ja nicht um eine Tabellenreihe erstellen darf habe ich das Layout komplett zu diesem geändert. Mit der Angabe der Spalten kann ich ja alles wieder responsive machen. Und es geht mit den divs oder anderen HTML-Elementen wie section/article/aside/.... besser zu arbeiten. Ich nehme da nur divs weil der container ausenrum ein section ist und article ja nicht passt.

Ich finde Bootstrap einfach gut.

div ausblenden

Jetzt mitmachen!

Teilen