Jump to content

Script runs twice on click

Recommended Posts

Hi! I am making a little game for iOS using apache's Cordova.I use Zepto.js as a light css3 jQuery replacement for animations etc. Players have to create letters as Wim Crouwel did in his New Alphabet, they have to do it in a short amount of time, thus far the project is going fine for the limited skills i have but now i am encountering a problem and i dont know where it could come from. What happens is that when i validate if a letter hase been constructed correctly and it is in fact correct it adds 2 "levels" instead of just 1, what i discovered is that the script actually runs twice. It even reacts tot the amounts of clicks i made on the page, lets say i click 4 "clickable" element's on the page it ads 4 levels. This is what i get in the console:

2 clicks = 2 levels up?validating...correct! go from level 0 to..1validating...correct! go from level 0 to..2

here is a live demo:http://bram-de-leeuw...welGame/(you'll probably have to resize your browser to make it work, the first thing you'll see is a iPhone5 version that isn't styled correctly. When you'll make your browser smaller it will show a iPhone 4 version.) This is the validation code:

// Validate Letter A$("#verder").click(function () {//if (Level = 0){ // LETTER = A  // CORRECT  console.log("validating...");  if (   // LETTER A   $(".CenterBottom").hasClass("black") === true &&   $(".CenterRight").hasClass("black") === true &&   // NOT LETTER A   $(".CenterLeft").hasClass("black") === false &&   $(".CenterTop").hasClass("black") === false &&   // ETC..     ){ // IF ITS CORRECT	console.log("correct! go from level 0 to..")	Level++;	$("#alert-fact").animate("Alert", {duration:2000, easing: 'ease'});	$(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'});	$(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'});  	console.log(Level);  // SOMETHING IS MISSING  } else if (   $(".CenterBottom").hasClass("black") === true &&   $(".CenterRight").hasClass("black") === false ||   $(".CenterRight").hasClass("black") === true &&   $(".CenterBottom").hasClass("black") === false     ) {   $("#alert-missing").animate("Alert", {duration:2000, easing: 'ease'});	if ($(".CenterBottom").hasClass("black") === true) {	 $(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'});	};	if ($(".CenterRight").hasClass("black") === true) {	 $(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'});	};  // WRONG  } else {   $("#alert-wrong").animate("Alert", {duration:2000, easing: 'ease'});  };//};//if (Level = 1){ // LETTER = B//};});

Edited by TheB

Share this post

Link to post
Share on other sites

The problem is because your Segment function assigns click handlers to #verder and #terug, so every time the Segment function runs it adds another click handler to do the same thing.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...