• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] onclick-Funktion reagiert erst bei zweitem Klick

F

Fir Kay

Neues Mitglied
Hi liebe Community,

ich habe mir eine JavaScript-Funktion gebastelt, mit der die CSS-Eigenschaft visibility eines DIV-Containers umgeschaltet wird. Die Funktion wird mit einem onclick-Event auf einem Link ausgelöst.

Link:
Code: 
<a href="#" onclick="div_visibility_toggle('divid')">[X]</a>

Funktion:
Code: 
function div_visibility_toggle(div) {
	div_visibility = document.getElementById(div).style.visibility;
	
	if (div_visibility == 'hidden') {
		document.getElementById(div).style.visibility = 'visible';
	} else {
		document.getElementById(div).style.visibility = 'hidden';
	}
}

So, das Problem besteht nun darin, dass erst beim zweiten Mal Draufklicken die Eigenschaft geändert wird. Wenn ich die Seite neulade, dann einmal klicke, passiert nichts. Wenn ich dann ein zweites Mal klicke, schaltet es die Eigenschaft wie gewünscht um.

Ich habe auch schon mithilfe von Firefox und den Entwicklertools geguckt, ob mir die Console irgendein Fehler ausspuckt. Dem ist aber nicht so. Hat jemand von euch eine Erklärung? Ich muss zugeben, supergut kenne ich mich mit JS noch nicht aus, daher weiß ich nicht, ob das ein ziemlich banaler Fehler ist. Wenn ja, entschuldigung ^^

MfG
Simon
 
Warum so umständlich?

jQuery
Code: 
$('a').on('click', function() {
   $('#myDiv').toggle();
})

Man schreibt heute kein JavaScript mehr innerhalb HTML-Tags.
 
Ich sehe nicht, wo das umständlich sein sollte. Warum muss man für alles jQuery benutzen? Ich würde es gerne ohne jQuery lösen.

Warum schreibt man heute kein JavaScript mehr in HTML-Tags?
 
Fir Kay schrieb:
Warum schreibt man heute kein JavaScript mehr in HTML-Tags?
Zum Vergrößern anklicken....

Inhalt, Layout, Struktur und Verhalten einer Webseite gehören getrennt. Selbst HTML wird heute vielfach nicht mehr statisch geschrieben, sondern über Frameworks gerendert, und bei größeren Sites kommen oftmals Less/Sass zur Kompilierung von CSS-Dateien zum Einsatz. Der eigentliche Grund hierfür ist die leichtere Wartbarkeit .

Das Problem mit JavaScript liegt in seinem vergleichsweise geringen Funktionsumfang, den man früher durch prototyping mühsam erweitern musste. Moderne Funktionsbibliotheken nehmen einem diese Arbeit ab und jQuery wird keinesfalls die einzige bleiben, welche dir auf deinem Weg in die JS-Welt begegnet. Pures JavaScript findet sich heute eigentlich nur noch in Form von Design-Patterns und wird auch dort mittlerweile von MV*-Frameworks verdrängt. Für simple DOM-Manipulationen oder hinzufügen von CSS-Attributen bringt es jedenfalls nichts mehr.

Wenn dich das Thema interessiert, dann fang mit jQuery an, widme dich anschließend objektorientiertem JS und mache danach mit Frameworks wie NodeJS und BackboneJS weiter. JavaScript ist eine faszinierende Sprache, mit der man sehr viel machen kann und die zunehmend an Bedeutung gewinnt. Aber man sollte schon die richtige Route einschlagen und nicht veraltete Quellen wie selfhtml als Grundlage zum Einstieg verwenden.
 
Ok. Dass CSS,HTML und PHP getrennt werden wusste ich, aber, dass JavaScript auch getrennt wird wusste ich noch nicht. Ich habe das dann mal mit jQuery getestet, aber es tut sich einfach nichts. Ich sehe auch nicht, was ich falsch gemacht habe, laut den Anleitungen, die ich gefunden habe.

Code: 
<html>
   <head>
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
     <script type="text/javascript">
       $( "a.toggle" ).click(function() {
         alert("Test");

        if ($( "#hidden" ).is( ":hidden" )) {
           $( "#hidden" ).css( "visibility", "visible" );
         }

         if ($( "#hidden" ).is( ":visible" )) {
           $( "#hidden" ).css( "visibility", "hidden" );
         }
       });
     </script>
   </head>
   <body>
     <a href="#" class="toggle">[X]</a>
     <div id="hidden" style="visibility: hidden;">
       Versteckter Text
     </div>
   </body>
</html>
 
Fir Kay schrieb:
Ich sehe nicht, wo das umständlich sein sollte. Warum muss man für alles jQuery benutzen? Ich würde es gerne ohne jQuery lösen.
Zum Vergrößern anklicken....

Sehe ich genauso. Man macht sich zudem abhängig von einem Softwarepaket was man nicht komplett kennt und stopft seine Seite mit vielen Bytes voll die man nicht mal braucht.

In deinem Fall ...

Fir Kay schrieb:
So, das Problem besteht nun darin, dass erst beim zweiten Mal Draufklicken die Eigenschaft geändert wird. Wenn ich die Seite neulade, dann einmal klicke, passiert nichts. Wenn ich dann ein zweites Mal klicke, schaltet es die Eigenschaft wie gewünscht um.
Zum Vergrößern anklicken....

ist die Ursache einfach die Style-Eigenschaft des Elementes. Wenn Du die Seite lädst und das Element bisher keine visible-Eigenschaft hat, dann wird das false-Zweig deiner Bedingung genommen und somit visibility auf hidden gesetzt. Es passiert also etwas, aber etwas was Du nicht mitbekommst.

Beachte: wenn Du per obj.style auf eine CSS-Eigenschaft zugreifen willst, dann muss diese im style-Attribut des Objektes gesetzt sein. Wenn die CSS-Eigenschaft per externe CSS-Datei gesetzt ist, dann findet obj.style diese Eigenschaft nicht. Informiere dich über computedstyle, dann wirst Du verstehen was ich meine ;)
 
Fir Kay schrieb:
Ok. Dass CSS,HTML und PHP getrennt werden wusste ich, aber, dass JavaScript auch getrennt wird wusste ich noch nicht. Ich habe das dann mal mit jQuery getestet, aber es tut sich einfach nichts. Ich sehe auch nicht, was ich falsch gemacht habe, laut den Anleitungen, die ich gefunden habe.
Zum Vergrößern anklicken....

Du sprichst mit $('#hidden') ein Objekt an, das an dieser Stelle noch nicht existiert. Wenn du deine Funktion im Head einbindest, solltest du sie grundsätzlich in ein $(document).ready() einbetten, oder alternativ dazu am Fuß der Seite, direkt vor dem schließenden Body-Tag platzieren. Außerdem gilt ein Objekt dann als visible, wenn es Raum einnimmt und das ist - im Gegensatz zu display: none - bei visibility: hidden der Fall. Darüber hinaus empfiehlt es sich, in Verbindung mit click() den Eventlistener on() zu verwenden, denn damit lassen sich auch asynchron nachgeladene DOM-Elemente ansprechen.

Nochmal zur Logik:

In jQuery stehen die Funktionen show() und hide() für display: block und display: none, und toggle() ist die Kombination aus beiden. Für nachfolgendes HTML:

HTML: 
<a href="#" class="toggle">[X]</a>
<div id="hidden" style="height:50px;width:50px;background:red;"></div>

könntest du die Funktion so schreiben:
HTML: 
$('a').on('click', function() {
    if ( $('#hidden').is(':visible') ) {
        $('#hidden').hide();
     } else {
         $('#hidden').show();
     }
});

oder so:
HTML: 
$('a').on('click', function() {
    $('#hidden').toggle();
});

und hier eingebettet in $(document).ready():
HTML: 
$(document).ready(function() {
    $('a').on('click', function() {
        $('#hidden').toggle();
    });
})

Beides bewirkt das selbe, das zweite ist aber deutlich kürzer, von purem JS mit seinem umständlichen document.getElementByID('foo').style.display = "none" ganz zu schweigen.
 
Zuletzt bearbeitet:
Vielen Dank für eure beiden Antworten. Beide erklären so einiges, was mir unklar war. Und mit Tronjers Anleitung funktioniert es jetzt auch wie gewünscht. Danke ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben