Trouble saving count variable js/jquery game

Can someone help me? I cannot for the life of me get this simple count working on this javascript/jquery game I made. The streak will increment and then just reset back to zero no matter what I do. Any advice would be greatly appreciated! thank you! Here is code-> https://github.com/CraftyClark/Random_Quotes_JS-master/tree/guessing-game
application is hosted here-> https://laughing-einstein-421f2b.netlify.com/
for help troubleshooting app, I have printed some things to console; such as the answer required for streak/count to increment. So just select the answer that is being printed to console in order to troubleshoot. Thank you!

It’s a lot easier for us to troubleshoot when we have a working mock-up of your app, for front-end only applications, usually a codepen or codesandbox link will do, for fullstack applications you can take a look at glitch.

@CraftyClark First, simplify your submit button click event handler

 $("#new-guess").click(submitFunction);

Then, you need to make sure you prevent the default action of a form submitting which is to load the page specified in the action attribute. Since your form does not have an action attribute, it assumes the same page you are on needs to be loaded. Basically, after every submit, you are reloading the page which starts everything over. To prevent that, you take advantage of the event object which is passed to all event handlers and call the preventDefault method.

function submitFunction(event){
  event.preventDefault();

FYI - The following is a very bad idea to create a delay. You are blocking Node’s single-thread while the loop runs.

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

Instead, I recommend using setTimeout which is asynchronous. There was really no reason to sleep an extra 10 seconds inside the if/else blocks, because you already had a call to sleep above that section, so I removed it. Personally, I would make the delay (if you really think it should have one) to be no longer than 1 second. To successfully implement the following code, you will need to declare a global sleep variable. You will notice I put the logic which checks the answer to another function, to make it more readable when using the setTimeout.

function submitFunction(event){
  event.preventDefault();
  input = $("#exampleFormControlSelect1").val();
  console.log("input: " + input + " answer: " + answer);
  clearTimeout(sleep);
  sleep = setTimeout(checkAnswer, 10000);
}

function checkAnswer() {
  //if guess is correct
  if (input == answer) {
    console.log("input equals answer");
    streakCount++;
    $('#streak-count').html(streakCount);
    console.log(streakCount);
  }
  else {
    console.log("guess was wrong");
    streakCount = 0;
    getQuote();
  }
}

Don’t forget to delete your existing sleep function as it is not needed anymore.

1 Like

Thank you so much for your help! I’m currently away from computer but will try this as soon as I get home. Thanks again!

Okay I’m home and am about to tackle it again. I just noticed your text about my sleep function. I only added it in for testing purposes to see if my count was in fact incrementing, but just not staying incremented.

Thank you again for your help! it is GREATLY APPRECIATED! I was stuck on this for a while. Cheers