JavascriptI have used two [.click()] keywords in a program I've made and now after running it doesn't reset and keeps running. IS there a solution?

I have used two [.click()] keywords in a program I’ve made and now after running it doesn’t reset and keeps running. IS there a solution? (using jquery)

I don’t fully understand the question and I think we would need to see the code to help you?

Is this in an online IDE somewhere? Is there a repo?

$(document).click(function(){   

    if(!started){

      $("#level-title").text("level "+level);

      nextSequence();

      started=true;

    }

});

$(".btn").click(function(){

  var userChosenColour = $(this).attr("id");

  userClickedPattern.push(userChosenColour);

  playSound(userChosenColour);

  animatePress(userChosenColour);

  checkAnswer(userClickedPattern.length-1);

});

these are the two parts of my code

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Yeah, I’m not a jQ guy so I can’t just eyeball that.

For me at least, I’d want to see all the code. Is this in an online IDE somewhere? Is there a repo?

Also, please explain exactly what the problem is. What is it doing that you don’t want it to? Or what is it not doing that you want it to? Please be specific.

var buttonColors = ["red","blue","green","yellow"];

var gamePattern =[];

var userClickedPattern =[];

var started=false;

var level=0;

$(document).click(function(){   //game starts

    if(!started){

      $("#level-title").text("level "+level);//changes levels as game progresses

      nextSequence();

      started=true;

    }

});

function nextSequence(){

  userClickedPattern = [];

  level++;              // randomly chooses a color 

  $("#level-title").text("level "+level);// level increses when called again

    var randomNum = Math.random();

    randomNum=(randomNum*3)+1;

    randomNum=Math.floor(randomNum);

  var randomChosencolor = buttonColors[randomNum];

gamePattern.push(randomChosencolor);

$("#"+randomChosencolor).fadeIn(100).fadeOut(100).fadeIn(100);

playSound(randomChosencolor);

}


$(".btn").click(function(){

  var userChosenColour = $(this).attr("id");//DOM

  userClickedPattern.push(userChosenColour);

  playSound(userChosenColour);

  animatePress(userChosenColour);

  checkAnswer(userClickedPattern.length-1);

});

function playSound(name){

  var audio = new Audio("sounds/"+ name + ".mp3"); 

  audio.play();

}

function animatePress(currentColor) {

$("#"+ currentColor).addClass("pressed");

setTimeout(function () {

  $("#"+ currentColor).removeClass("pressed");

},100);

}

function checkAnswer(currentLevel){

  if(gamePattern[currentLevel]===userClickedPattern[currentLevel]){

 

   if(userClickedPattern.length===gamePattern.length){

     setTimeout(function(){

       nextSequence();

     },1000);

     }

   

  }else{

       

    playSound("wrong");

    $("body").addClass("game-over");

    setTimeout(function(){

      $("body").removeClass("game-over");

    },200);

   

    $("#level-title").text("Game Over");

   

    startOver();

}

}

function startOver(){

level=0;

gamePattern=[];

started=false;

}

This is the full JS code . I just made it for practice so it’s not in a repo and also im sorry if the readabilility is a little messy i’m just new here.
I made this for PC use and it had a “press any key to start” command to start.
which doesn’t work on mobile so i added the click jquery part instead of keydown .
now the problem is there are two click() events and the program i dont know why, is not calling the start over function to reset.

OK, but you can fix the readability - I gave you instructions above.

I’ll try to take look later, but something like a repo is easier to work with since we don’t have to recreate your project if we need to test something.

No, I’m sorry but create a repo or provide a link to an online IDE if you work on it that way. I don’t want to spend my evening recreating your project from scratch.

Or at least post the HTML so we have the document you are working with.


I would think the issue is that the listener is on the document and clicking the button counts as the document.

There are a few ways of dealing with it one might just be to check the click target and return out of the start function if it is the button.

$(document).click(function (event) {
  if(event.target.classList.contains('btn')) {
    return;
  }
  
  ...code
}

...code
2 Likes