CODEWITHSUNDEEP
javascriptjquerynan
jens_vdp
jens_vdp

Reputation: 594

javascript NaN variable

I'm doing some kind of quiz and counting the good results, but on the last one, my variable gets NaN and I don't know why. Anyone has a clue?

Every alert is counting well: 1, 2, 3, 4 but on .gotoresult it always gives NaN in the alert, so it always goes to .lost.

$(document).ready(function() {
  var success = 0;
  $('.gotostep1').on('click', function() {
    success = 0;
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().hide();
    $('.step1').show();
  });
  $('.gotostep2').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step2').show();
  });
  $('.gotostep3').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step3').show();
  });
  $('.gotostep4').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step4').show();
  });
  $('.gotostep5').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step5').show();
  });
  $('.gotoresult').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    if (success == 5) {
      $('.won').show();
    } else {
      var success = true;
      $('.lost').show();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step intro">
  <button class="gotostep1">Start de quiz</button>
</div>
<div class="step step1" style="display:none;">
  <h3 class="contentTitle">Vraag 1</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep2" correct="false" src="/static/media/vraag1a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep2" correct="true" src="/static/media/vraag1b.jpg" />
    </div>
  </div>
</div>
<div class="step step2" style="display:none;">
  <h3 class="contentTitle">Vraag 2</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep3" correct="true" src="/static/media/vraag2a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep3" correct="false" src="/static/media/vraag2b.jpg" />
    </div>
  </div>
</div>
<div class="step step3" style="display:none;">
  <h3 class="contentTitle">Vraag 3</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep4" correct="false" src="/static/media/vraag3a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep4" correct="true" src="/static/media/vraag3b.jpg" />
    </div>
  </div>
</div>
<div class="step step4" style="display:none;">
  <h3 class="contentTitle">Vraag 4</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep5" correct="true" src="/static/media/vraag4a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep5" correct="false" src="/static/media/vraag4b.jpg" />
    </div>
  </div>
</div>
<div class="step step5" style="display:none;">
  <h3 class="contentTitle">Strikvraag</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotoresult" correct="true" src="/static/media/vraag5a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotoresult" correct="false" src="/static/media/vraag5b.jpg" />
    </div>
  </div>
</div>
<div class="step lost" style="display:none;">
  lost!
</div>
<div class="step won" style="display:none;">
  won!
</div>

Upvotes: 0

Views: 79

Answers (2)

Tomalak
Tomalak

Reputation: 338158

The secret is not to use counted CSS classes.

Look how short the code gets when all items that are the same (like all questions) also have the same CSS class.

$(function() {
  var success = 0;

  // every answer reveals the next answer
  $('.answer').click(function () {
    if ($(this).data('correct')) success++;
    $(this).closest('.question').hide().next('.question').show();
  });

  // the last answer reveals the overall result
  $('.question:last() .answer').click(function () {
    var result = (success == $('.answer').length) ? '#won' : '#lost';
    $(result).show();
  });
});
.question, .result {
  display: none;
}
.question.intro {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="question intro">
  <button class="answer">Start de quiz</button>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 1</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag1a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag1b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 2</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag2a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag2b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 3</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag3a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag3b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Vraag 4</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag4a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag4b.jpg" />
    </div>
  </div>
</div>
<div class="question">
  <h3 class="contentTitle">Strikvraag</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="answer" data-correct="true" src="/static/media/vraag5a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="answer" data-correct="false" src="/static/media/vraag5b.jpg" />
    </div>
  </div>
</div>
<div class="result" id="lost">lost!</div>
<div class="result" id="won">won!</div>

Upvotes: 1

Eliellel
Eliellel

Reputation: 1446

You declare success again inside $('.gotoresult') onclick event, making the type from integer to boolean, which cause the NAN error.

$(document).ready(function() {
  var success = 0;
  $('.gotostep1').on('click', function() {
    success = 0;
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().hide();
    $('.step1').show();
  });
  $('.gotostep2').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step2').show();
  });
  $('.gotostep3').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step3').show();
  });
  $('.gotostep4').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step4').show();
  });
  $('.gotostep5').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    $('.step5').show();
  });
  $('.gotoresult').on('click', function() {
    if ($(this).attr('correct') == 'true') {
      success++;
    }
    alert(success);
    $(this).parent().parent().parent().hide();
    if (success == 5) {
      $('.won').show();
    } else {
      success = 0;
      $('.lost').show();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="step intro">
  <button class="gotostep1">Start de quiz</button>
</div>
<div class="step step1" style="display:none;">
  <h3 class="contentTitle">Vraag 1</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep2" correct="false" src="/static/media/vraag1a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep2" correct="true" src="/static/media/vraag1b.jpg" />
    </div>
  </div>
</div>
<div class="step step2" style="display:none;">
  <h3 class="contentTitle">Vraag 2</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep3" correct="true" src="/static/media/vraag2a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep3" correct="false" src="/static/media/vraag2b.jpg" />
    </div>
  </div>
</div>
<div class="step step3" style="display:none;">
  <h3 class="contentTitle">Vraag 3</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep4" correct="false" src="/static/media/vraag3a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep4" correct="true" src="/static/media/vraag3b.jpg" />
    </div>
  </div>
</div>
<div class="step step4" style="display:none;">
  <h3 class="contentTitle">Vraag 4</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotostep5" correct="true" src="/static/media/vraag4a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotostep5" correct="false" src="/static/media/vraag4b.jpg" />
    </div>
  </div>
</div>
<div class="step step5" style="display:none;">
  <h3 class="contentTitle">Strikvraag</h3>
  <div class="img-selection-container">
    <div class="img-left img-semi">
      <img class="gotoresult" correct="true" src="/static/media/vraag5a.jpg" />
    </div>
    <div class="img-right img-semi">
      <img class="gotoresult" correct="false" src="/static/media/vraag5b.jpg" />
    </div>
  </div>
</div>
<div class="step lost" style="display:none;">
  lost!
</div>
<div class="step won" style="display:none;">
  won!
</div>

Upvotes: 1

Related Questions