Problem mit Javascript visibility

[mnike05]

Ich gebe eine Liste von Buchtitel aus. Für jeden Titel gibt es einen DIV-Block mit Detailangaben, die ich mit visibility:hidden ausblende.

<div style='visibility: hidden;' id='1234'>

Mit einem Link rufe ich eine Javascript-Funktion auf, die die Details einblenden soll:

function Einblenden(id) 
 {
 	element=document.getElementById(id);
 	alert('Test-ID=' + element.id);
 	element.style.visibility='visible';
}

Die element.id wird mir (zum Test) korrekt angezeigt, nur wird anschließend nichts eingeblendet.

Wo liegt mein Denkfehler?

[mnike051]

Sorry, ich hatte von einem Test noch ein display:none drin. Hat sich erledigt.

[marctrix]

Hej mnike05,

Ich gebe eine Liste von Buchtitel aus. Für jeden Titel gibt es einen DIV-Block mit Detailangaben,

Das Element heißt in HTML details 😉

Wo liegt mein Denkfehler?

s.o.

Wenn du nicht details nutzt, müsstest du die fehlenden Angaben zum Zustand und Zweck der Elemente hinzufügen (offen/geschlossen, Rollen usw).

Übrigens: sind das wirklich divs? Oder passen da section oder article besser?

Wenn man HTML so schreibt wie es gedacht ist, erspart man sich viel Arbeit und dem Nutzer viel Denkerei (Don't make me think!)

Marc

[Gunnar Bittersmann]

@@mnike05

Wo liegt mein Denkfehler?

Ein schwerwiegender liegt hier:

Mit einem Link rufe ich eine Javascript-Funktion auf, die die Details einblenden soll:

Links sind für Verweise zu anderen Seiten bzw. Stellen. Für Aktionen auf einer Seite sind Buttons da. Links und Buttons zu unterscheiden ist wichtig für Bedienbarkeit einer Seite.

Und noch was:

<div style='visibility: hidden;' id='1234'>
element.style.visibility='visible';

Man sollte Stilangeben i.a.R. nicht direkt mit JavaScript ändern. Hier wäre das hidden-Attribut zu verwenden:
<div hidden id='1234'>

Mit JavaScript entfernen: element.hidden = false; oder element.removeAttribute('hidden'); (wobei letzteres wohl auch in noch älteren Browsern funktioniert).

Wenn du die Sichtbarkeit über visibility steuern willst, im Stylesheet:

[hidden]
{
	display: block;
	visibility: hidden;
}

LLAP 🖖