CODEWITHSUNDEEP
javascriptjqueryrecursion
aendra
aendra

Reputation: 5346

Recursive function causes other calls to fire multiple times

I'm working on a quiz game, wherein the user is presented with a quote and has to guess the author:

  function startGame(quotes) {
    askQuestion(quotes[0], 0, 0);

    function askQuestion(quote, question, score) {
      var q = "<span class='quo'>&ldquo;</span><em>" + quote.quote + "</em><span class='quo'>&rdquo;</span>";
      $('.choice').css('visibility', 'visible');
      $('#questions').html(q);
      $('.choice').click(function(e){
        $('.choice').css('visibility', 'hidden');
        e.preventDefault();
        var nextq = (question + 1);
        var btntxt = (nextq < number_of_questions ? 'Next...' : 'Final results');
        if ($(this).attr('data-author') === quote.author) {
          score++;
          $('#questions').html('<h1>Correct.</h1><a class="btn next">' + btntxt + '</a>');
          document.getElementById('win').play();
        } else {
          $('#questions').html('<h1>Wrong.</h1><a class="btn next">' + btntxt + '</a>');
          document.getElementById('lose').play();
        }
        $('#questions').append('<h4>Score: ' + score + '/' + nextq + '</h4>');
        $('.next').on("click", function(){
          question += 1;
          if (question < number_of_questions) {
            askQuestion(quotes[question], question, score);
          } else {
            tallyScore(score);
          }
        });
      });
    }
  }

When a question is asked, the askQuestion() function is called again if fewer than 6 questions have been asked.

Everything works great, but I'm having issues with the sound effects. If a user gets an answer right and then an answer wrong, both the "win" and "lose" sound effects are played simultaneously.

My guess is that this has something to do with my recursively calling askQuestion() -- it seems like the entire "history" of the function is looped through. I was having a similar problem earlier — on correct answers, the score global variable was incremented by the number of previously correct answers (instead of just by one).

Any idea how I can fix that? Thanks!

Edit: As requested, here's a JSfiddle.

Upvotes: 0

Views: 186

Answers (2)

Boldizs&#225;r N&#233;meth
Boldizs&#225;r N&#233;meth

Reputation: 1847

Every time askQuestion is called, you add an event handler to the html elements. So when you click on the .choice element, multiple events are run.

Try giving a unique id to all generated element and use that id to attach event handlers.

Upvotes: 1

Evan
Evan

Reputation: 6115

easy fix actually. you are re-attaching the click listener over and over, so just remove it each time it gets set.

change

  $('.choice').click(function (e) {

to

  $('.choice').off().click(function (e) {

http://jsfiddle.net/NADYM/

Upvotes: 1

Related Questions