JavaScript js Script wird nicht getriggert / tut nichts

CitroenDsVier · 26. Juni 2016

Hallo zusammen,

hier ist mal einen Ausschnitt einer Website. Eigentlich müsste ja (oder liege ich falsch?) die js-function über den a-link getriggert werden und anschließend das div#login-popup in den Vordergrund rücken.

Tut sich aber nichts o.o

Code:

//var loginPopupStatus = false;
			
function loginPopup() { //trigger durch onClick auf Login-Button
	var loginPopupStatus = true; //nur übergangsweise, damit überhaupt was gemacht wird
	
	if(loginPopupStatus) {
		$('#login-popup').animate({
			z-index: "-1";
			opacity: "0";
		}, 200);
		loginPopupStatus = false;
	} else {
		$('#login-popup').animate({
			z-index: "0";
			opacity: "1";
		}, 200);
		loginPopupStatus = true;
	}
}

HTML:

<a class="right" onclick="loginPopup()"><li class="right">Login</li></a>

...

<div id="login-popup">
	<h1 class="center">Login</h1>
	<form id="internlogin-form" action="login.php" name="internlogin-form" method="POST">
		<input type="Text" name="Username" maxlength="25" placeholder="Benutzername" />
		<input type="password" name="Password" maxlength="25" placeholder="Passwort" />
		<input type="submit" value="Login" />
		<?php

			...

		?>
	</form>
</div>

Kann Jemand, der in JS etwas erfahrener ist als ich, vielleicht einen Fehler sehen? Das wäre cool!

MfG, V40

Lawnmower · 26. Juni 2016

Check doch mal mit console.log('Hier') ob der Trigger ausgelöst wird.
animate scheint mir aber falsch geschrieben zu sein, bei dir steht anmiate.
Ansonsten falls das auch nicht hilft einfach mal mit show() und hide() probieren - dann schliesst Du die Animation Geschichte als Fehlerquelle schon mal aus.
Und sonst immer mit der Debug Console des Browsers arbeiten (F12) - die hilft recht viel solche Fehler selber einzugrenzen.

CitroenDsVier · 26. Juni 2016

Der Rechtschreibfehler ist natürlich doof. Wenn man zu lange solchen Text liest überliest man sowas schnell

danke dafür.

Die Konsole gibt das aus:

Code:

ReferenceError: loginPopup is not defined

seltsam, habe ich etwas vergessen?

Lawnmower · 26. Juni 2016

Wo steht die JS Funktion? Ist die in einer separater JS Datei? Oder ganz unten auf der Seite und der a Link ist weiter oben?

FrAGgi · 26. Juni 2016

Ist das Script überhaupt eingebunden?

edit: zu langsam

boula · 26. Juni 2016

Dein Fehler liegt in Zeile 4.
Der Gültigkeitsbereich deiner Variable loginPopupStatus liegt nur in der aufzurufenden Funktion loginPopup.
D.h. sie hat bei jedem Aufruf den Wert true, und daher wird dein login div jedes mal ausgeblendet.

Versuch mal folgendes:

Code:

loginPopupStatus = true; // globale bool variable
 
function loginPopup(){

  if(true == loginPopupStatus){
    $('#login-popup').anmiate({
      z-index: "-1";
      opacity: "0";
    }, 200);
    
    loginPopupStatus = false;
  } else {

    $('#login-popup').anmiate({
      z-index: "0";
      opacity: "1";
    }, 200);
    
    loginPopupStatus = true;
  }
}

CitroenDsVier · 26. Juni 2016

die function ist in einem <script type="text/javascript"> Tag im head der html.

Ergänzung (26. Juni 2016)

@boula: das stimmt, ich habe das Ganze jetzt umgedreht. Aber die function wird ja nicht mal aufgerufen, da sie "not defined" ist

John Reese · 26. Juni 2016

Also generell ist es nicht ratsam, das "onclick"-Attribut zu verwenden (u.a., weil man sonst kein CSP verwenden kann). Daher würde ich das so lösen:

HTML:

<a class="right" id="login-popup-trigger"><li class="right">Login</li></a>

Code:

$(function() {
    $("#login-popup-trigger").on("click", function(e) {
        e.preventDefault();
        
        // $('#login-popup').animate(
        // .... etc.
    });
});

Aber um auf dein Problem mit deinem Code zurückzukommen: Hast du die Funktion auch garantiert nicht noch in einer anderen Funktion verschachtelt? Also ist sie in etwa so definiert:

Code:

<html>
....
<script>
    function loginPopup() { ... };
</script>

?

CitroenDsVier · 26. Juni 2016

Meine Funktion ist nicht verschachtelt, sondern einfach in einem <script ...> tag im Head. Mehr als die eine Funktion ist da auch nicht drinnen.

Ich habe das ohne onClick jetzt so gelöst (funktioniert aber immernoch nicht)

HTML:

<script>
	var main = function() {
		var loginPopupStatus = false;
		$('#login-popup-trigger').click(function() {
			if(loginPopupStatus===false) {
				$('#login-popup').animate({
					z-index: "0";
					opacity: "1";
				}, 200);
				loginPopupStatus = true;
			} else if(loginPopupStatus===true) {
				$('#login-popup').animate({
					z-index: "-1";
					opacity: "0";
				}, 200);
				loginPopupStatus = false;
			}
		});
	}

	$(document).ready(main);			
</script>

...

<a class="right" id="login-popup-trigger"><li class="right">Login</li></a>

Ergänzung (26. Juni 2016)

Er meldet jetzt

Code:

SyntaxError: missing : after property id

an der Stelle

Code:

z-index: "0";

Was hat das zu bedeuten?

Ergänzung (26. Juni 2016)

@CryNickSystems: Deine Version funktioniert auch nicht

Ergänzung (26. Juni 2016)

Der Fehler mit dem "missing :" scheint "das Problem" zu sein, egal, welche Variante ich versuche, immer kommt an der Stelle "z-index: "-1"" ein Fehler.

Kann sich das Jemand erklären / kennt Jemand eine Lösung dafür?

Lawnmower · 26. Juni 2016

Da sollten auch keine ";" sein sondern nur ein "," und das auch nur bei z-index, bei opacity nicht da es die letzte Übergabe ist.

CitroenDsVier · 26. Juni 2016

ändert leider nichts an der Fehlermeldung, die bleibt. Fehlt immernoch ein ":" (kein ";" !).

Ergänzung (26. Juni 2016)

Ich kann mir diesen fehlenden Doppelpunkt nicht erklären. Sitze inzwischen über 2.5h über diesem Fehler und finde ihn nicht.

Hat denn Niemand von Euch einen Lösungsvorschlag?

Lawnmower · 26. Juni 2016

Kannst Du das nicht mal auf einen Webspace hochladen und den Link zum Beispiel hier reinstellen, das würde ein bisschen helfen.

CitroenDsVier · 26. Juni 2016

ich habe den Fehler gefunden...

für javascript heißt es nicht:

Code:

z-index: 0

sondern:

Code:

zIndex: 0

ich weiß nicht was ich dazu sagen soll...

Danke an Alle die hier geholfen haben, schönen Sonntagabend noch!

John Reese · 26. Juni 2016

Natürlich geht das nicht.
Du kannst in einem Objekt (nichts anderes ist etwas zwischen geschweiften Klammern, "{" und "}") keine Bindestriche in einem Key (also dem Teil vor dem Doppelpunkt) schreiben (Ausnahme: Dein Key ist als String angegeben).

Beispiel:

Code:

var foo = {fooBar: 123};

und

Code:

var foo = {"foo-bar": 123};

gehen beide.
Das hier geht nicht:

Code:

var foo = {foo-bar: 123};

.

CitroenDsVier · 26. Juni 2016

wusst ich nicht. Jetzt bin ich schlauer

Suche

JavaScript js Script wird nicht getriggert / tut nichts

CitroenDsVier

Lt. Commander

Lawnmower

Maître de cuisine Pro

CitroenDsVier

Lt. Commander

Lawnmower

Maître de cuisine Pro

FrAGgi

Rear Admiral Pro

boula

Cadet 4th Year

CitroenDsVier

Lt. Commander

John Reese

Lt. Commander

CitroenDsVier

Lt. Commander

Lawnmower

Maître de cuisine Pro

CitroenDsVier

Lt. Commander

Lawnmower

Maître de cuisine Pro

CitroenDsVier

Lt. Commander

John Reese

Lt. Commander

CitroenDsVier

Lt. Commander

Ähnliche Themen