[GELÖST] click-Event mit clearInterval wird sofort ausgelöst

[Blu]

Hallo, ich bin neu hier und lerne gerade JavaScript.

Ich habe versucht über die Suchfunktion schlau zu werden, leider hat dies nicht geklappt.

Ich versuche mich gerade an einem sehr simplen Übungsprojekt. Dabei soll eine h1-Überschrift im Viereck laufen und bei einem Klick mit der Maus anhalten. Die Animation funktioniert einwandfrei... bis ich den Code einsetze, der das Interval der Animation löschen soll. Dann läuft die Animation nicht mehr.

Hier der Code, der in meinem Body steht:

<h1 id="ueberschrift">Hallo Welt!</h1>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script>
	
	var links = 0;
	var oben  = 0;
	
	function laufenImQuadrat() {
		$('h1').offset({left: links, top: oben});
		
		if (links < 200 && oben == 0) {links++;}
		if (links == 200 && oben < 200) {oben++;}
		if (oben == 200 && links > 0) { links--; }
		if (links == 0 && oben > 0) {oben--;}
		
	}
	
	var intervalID = setInterval(laufenImQuadrat, 10);
	$('body').click(clearInterval(intervalID));

</script>

Was mache ich falsch?

LG Blu!

EDIT. Hat sich erledigt. Ich habe das Konzept der Eventhandler nicht so wirklich verstanden. >.< Thread kann gerne gelöscht werden.

 

[tsseh]

Die Animation funktioniert einwandfrei... bis ich den Code einsetze, der das Interval der Animation löschen soll. Dann läuft die Animation nicht mehr.
...

  $('body').click(clearInterval(intervalID));

du rufst clearInterval auf und gibst das ergebniss (undefined) an click weiter.
click erwartet aber eine funktion und nicht undefined
https://api.jquery.com/click/
damit brichst du
1. das intervall gleich wieder ab, nachdem du es gestartet hast
2. weist dem click-event keine funktion zu

 

[Blu]

Danke für die Antwort!

 

[mikdoe]

gelöst?

 

[andreax]

ja ; )

Hier mit Schalter
Der Fehler lag daran das man in JQ dem Eventhandler eine Funktion übergeben muss.
wie tsseh schon weiter oben bemerkte.
Ich würde das ja lieber ohne JQ machen so mit Css animation und Pure JS

<h1 id="ueberschrift">Hallo Welt!</h1>

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

<script>
	
	var links = 0;
	var oben  = 0;
	var switcher = false;
	function laufenImQuadrat() {
		$('h1').offset({left: links, top: oben});
		
		if (links < 200 && oben == 0) {links++;}
		if (links == 200 && oben < 200) {oben++;}
		if (oben == 200 && links > 0) { links--; }
		if (links == 0 && oben > 0) {oben--;}
		
	}
	
	var intervalID = setInterval(laufenImQuadrat, 10);
	$('body').click(function ()
	{
	switcher = !switcher; 
	if(switcher){clearInterval(intervalID);}
	else{intervalID = setInterval(laufenImQuadrat, 10);}
	
	});

</script>