visibility mit Javascript ändern

Knollkopp · 29. Mai 2018

Hallo Zusammen,

ich möchte von der Zeile

Code

<tr style="visibility: collapse" id="opt">

per js die visibility ändern.

Versucht habe ich es mit

Code

function add() {
document.getElementById("opt").style.visibility = "visible";
}

die per Button aufgerufen wird.

Das lässt die Zeile aber nur kurz aufblitzen und direkt wieder verschwinden.

Was mache ich falsch?

Arne Drews · 29. Mai 2018

Muss an was anderem liegen, funktioniert bei mir wie gewollt, wenn ich das richtig verstanden habe:

https://codepen.io/anon/pen/rKNKBr

basti1012 · 29. Mai 2018

@Knollkopp hast du das mal so gemacht wie Arne Drews das gezeigt hat .? Weil ich habe das mal gerade getestet und interesant ist es das wenn du nur das tag <tr> nimmst ,funktioniert das gar nicht . Du mußt schon eine ganze Tabelle erzeugen wie in sein Beispiel.

In deinen Code schnipsel können wir ja jetzt nicht sehen wie der Rest aussehen tut. Fals du es nicht hinbekommen solltest dann zeig uns doch mal den ganzen Code oder ein Link zur Seite

Knollkopp · 30. Mai 2018

Merkwürdig. Ich bin grade am Javascript lernen, nutze dafür entweder Notepad++ und schaue mir das Ergebnis dann entsprechend im Browser an oder Thimble.

Offline Browser funktioniert scheinbar gar keine extern eingebundene js Datei, oder gibt es dafür einen Trick?

Über Thimble wird die Funktion zwar, wie beschrieben, ausgeführt, die Zeile ist aber genau so schnell wieder weg. Deine Version basti1012 funktioniert dort allerdings, genau wie von dir gepostet.

Hier ist mal der komplette Code:

HTML

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>

<form>

    <table>

      <tr>
        <td>Vorname <input type="text" id="vn1"></td>
        <td>Nachname: <input type="text" id="nn1"></td>
      </tr>

      <tr style="visibility: collapse" id="opt">
        <td>Vorname: <input type="text" id="vn2"></td>
        <td>Gewicht: <input type="text" id="nn2"></td>
      </tr>

      <tr>
        <td colspan="2"><button onclick="add()">Weitere Reihe hinzufügen</button></td>
      </tr>

    </table>

</form>


</body>

</html>

Alles anzeigen

Knollkopp · 30. Mai 2018

Problem gelöst: Einerseits muss ich bei Notepad++ den vollständigen Pfad der js Datei angeben, damit der Code ausgeführt wird.

Das eigentliche Problem lässt sich damit beheben, dass der Button nicht Teil der Tabelle sein darf.

Setze ich den einzeln darunter funktioniert das Ganze. Kann mir das jemand erklären?

basti1012 · 30. Mai 2018

weil <form> Seiten reload macht bzw sendet ,weiß nicht wie ich das erklären soll.

wenn du das <form> </form> um die tabelle weg machst dann geht es auch so wie du es am anfang hattest.

https://basti1012.bplaced.net/…rdner=html-seminar&id=774

willst du eigentlich nur eine Zeile einfügen oder soll das mal so sein das bei jeden klick auf den Button noch eine Zeile dazu kommt?

Knollkopp · 30. Mai 2018

Danke!

Insgesamt wäre es natürlich toll, wenn mit jedem Klick Zeilen dazu kämen.

basti1012 · 30. Mai 2018

soll das als tabellen format bleiben oder gehen auch <div> ??

Wie soll das den zum schluß generell aussehen , hast du dir da schon ein Plan zurecht gelegt

Arne Drews · 30. Mai 2018

Ob DIV oder TR wäre eigentlich egal.

FORM wird vermutlich benötigt, weil Daten eingegeben werden soll? Dann muss bei dem KlickEvent eigentlich nur preventDefault() eingesetzt werden, dann sendet er auch keinen Request an der Stelle.

basti1012 · 30. Mai 2018

Hier mal zwei Möglichkeiten mit klicken mehrere Reihen zu bekommen.

Diese Art ist eigentlich kein schöner Code. Kann man machen, aber die meisten würden es wohl nicht bevorzugen.

https://basti1012.bplaced.net/…rdner=html-seminar&id=775

Oder diese ,die finde ich persönlich besser, und ist vom Code her wahrscheinlich auch Korekter..

https://basti1012.bplaced.net/…rdner=html-seminar&id=775

Arne Drews kennt bestimmt noch eine bessere ,oder was meinst du dazu ??

Und, kommt darauf, an was er vorhat nee. Knollkopp brauchst du deine <form> Felder überhaupt? Oder hast du die nur genommen, weil du es so gewohnt bist? Hast du aus einen bestimmten Grund das Tabellenlayout ausgesucht, oder darf es auch was anderes sein ??

EDIT : Wichtig ist nur ,wenn du mehrere Zeilen erzeugst darfst du nie die gleiche ID verwenden. Benutze dafür Class ,oder erzeuge jeweils eine neue ID wie ich es in 2 Beispiel gemacht habe ..

Arne Drews · 30. Mai 2018

Der Einfachheit halber würde ich das dann so machen:

https://codepen.io/anon/pen/MXYKXo

Hier hat dann jedes tr einen data-count und ist darüber ermittelbar. Weiterhin würde ich wie darin zu sehen Arrays für die name-Attribute des input verwenden.

Wenn es dann am Ende doch ein Formular ist - ansonsten macht so eine Eingabe von Namen für mich keinen Sinn -, ist es egal, wieviele "Zeilen" es sind, weil PHP es als Array erkennt und darin die Datensätze als Elemente zu finden sind.

Ob das jetzt besser oder schlechter ist, wie Deine Vorgehensweise, kann ich nicht beurteilen, ist halt nur meine grundlegende Vorgehensweise.

Noch besser wäre es aus meiner Sicht allerdings definitiv, wenn man die zusätzlichen Datensätze als Elemente in das DOM hängen würde.

Über DOM sähe in etwa so aus:

https://codepen.io/anon/pen/JZoXOg

Das wäre aus Dokumentensicht, die richtige Vorgehensweise.

Knollkopp · 30. Mai 2018

Danke für eure Antworten!

Tatsächlich sind sowohl die Tabelle als auch <form> aus Gewohnheit entstanden, ich werde mich jetzt noch mal an eine Variante mit DIV wagen.

Arne Drews · 31. Mai 2018

Wozu die Eingaben, wenn Du keine Form benötigst?

Knollkopp · 1. Juni 2018

Weil Berechnung und Ausgabe komplett über Javascript laufen und auf der gleichen Seite wieder ausgegeben werden.

Arne Drews · 1. Juni 2018

Aus technischer Sicht einleuchtend. Aber was macht die Seite denn?

Mir erschließt sich nicht, warum man auf einer Seite lauter Eingaben macht, die am Ende verworfen sind, bspw. Reload o.ä.

Selbst wenn Du die Daten per Ajax senden solltest, wärst Du mit einer <form> besser aufgestellt.

Ist am Ende Dein Projekt, Deine Sache... Es interessiert mich nur, weil mir kein einziger Anwendungsfall dazu einfallen würde...

Knollkopp · 1. Juni 2018

Da hast du wahrscheinlich recht. Im Moment ist es bloß eine kleine Bastelei zum Lernen, die mir aus den eingegebenen Daten neue berechnet, die ich dann offline weiterverwerten kann und danach nicht wieder brauche. Quasi ein sehr simpler Rechner.

Auf Dauer wäre ein Speichern wohl sinnvoll, dann müsste ich das Ganze etwas umbauen bzw. eh auf PHP umschwenken.

Da es aber wie gesagt mehr ein Lernprojekt ist, sieht der Code momentan eh so aus, dass es für ihn in absehbarer Zeit eh keine andere Chance gibt, als neu und schöner geschrieben zu werden.

Arne Drews · 1. Juni 2018

Ja ok, zum Testen/Rumspielen ist das ja ok, da macht auch nicht alles Sinn, was ich mache.

visibility mit Javascript ändern

Jetzt mitmachen!

Teilen