Funktion in Funktion -> Dauerschleife

[zappzerapp]

Hi tutorial.de-User,

ich stehe irgendwie total auf dem Schlauch und hoffe, mir kann jemand weiterhelfen .

Und zwar habe ich einen Button, der einen HTML-div auf- und wieder zuklappen soll,
welches ich mit folgendem Code realisieren wollte:

var firstDone = false;

function newEntryAnimation()
{
    document.getElementById('plus').style.webkitAnimation = 'rotateAnimation 0.25s';
    if(firstDone == true){
    	document.getElementById('plus').onlick=exitEntryAnimation();}
    document.getElementById('new-entry').style.display = 'run-in';
    document.getElementById('new-entry').style.webkitAnimation = 'newEntryAnimation 0.25s';
    document.getElementById('new-entry').style.opacity = '1';
    firstDone = true;
}
function exitEntryAnimation()
{
    document.getElementById('plus').style.webkitAnimation = 'rotateBackAnimation 0.25s';
    if(firstDone == false){
    	document.getElementById('plus').onlick=exitEntryAnimation();}
    document.getElementById('new-entry').style.display = 'none';
    document.getElementById('new-entry').style.webkitAnimation = 'exitEntryAnimation 0.25s';
    document.getElementById('new-entry').style.opacity = '0';
    firstDone = false;
}

Das ganze funktioniert jetzt soweit, dass es beim ersten Klick aufgeklappt und beim zweiten meine rotateBackAnimation ausgeführt, aber weder mein CSS-display nicht auf none gesetzt, noch beim dritten Klick wieder die erste Funktion aufgerufen wird.


Ich hoffe man konnte mir folgen
Vielen Dank schon mal für alle Antworten,
zappzerapp

 

[ComFreek]

Habe jetzt den Code nicht genau studiert, aber 2 Fehler stechen sofort ins Auge:

if(firstDone == false){
        document.getElementById('plus').onlick=exitEntryAnimation();}

Muss lauten:

if(firstDone == false){
        document.getElementById('plus').onlick=exitEntryAnimation;}

Weil du eine Referenz auf die Funktion übergibst. Die Version mit Klammern ruft die Fkt. auf und übergibt den eigentlichen Rückgabewert der Funktion.