Geek Answers Handbook

The jQuery Click method only works once in my quiz

I am doing a simple quiz (in the style of one question at a time), this is the JS code:

$(document).ready(function(){ var item1 = document.getElementById('questionarea'); var item2 = document.getElementById('answers'); var totalQuestions = $('.questionarea').size(); var currentQuestion = 0; $questions = $('.questionarea'); $questions.hide(); $(".btn-lg").click(function(){ $(this).hide(); $(".progress").show(); $(".answers").show(); $($questions.get(currentQuestion)).fadeIn(); }); $('.answers').click(function() { $($questions.get(currentQuestion)).fadeOut(function () { currentQuestion += 1; $($questions.get(currentQuestion)).fadeIn(); }); }); });

And it works, but only once! for the first question / answers. When I click on any of the buttons answers from the second question, nothing happens! It does not disappear, and the third question never appears. What's the matter? Thanks in advance!

HTML:

 <div class="col-lg-6 text-center"> <button type="button" class="btn btn-primary btn-lg text-center" id="start">Start quiz</button></div> <!-- QUIZ AREA --> <!-- QUESTION & ANSWERS 1 --> <div class="questionarea QA1 text-center"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question1">Q1: How did you and your BFF meet?</p> </ul> <br> <div class="answers"> <div id="row divoption1"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> At work </label></div> <br> <div id="row divoption2"> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Living together</label></div> <br> <div id="row divoption3"><label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Under unusual circumstances</label></div> <br> <div id="row divoption4"> <label class="btn btn-primary"> <input type="radio" name="options" id="option4"> In school</label></div></div> </div> <!-- QUESTION & ANSWERS 2 --> <div class="questionarea QA2 text-center"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question1">Q2: How would you describe your friendship?</p> </ul> <br> <div class="answers"> <div id="row divoption1"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Needy </label></div> <br> <div id="row divoption2"> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Amazing</label></div> <br> <div id="row divoption3"><label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Deep</label></div> <br> <div id="row divoption4"> <label class="btn btn-primary"> <input type="radio" name="options" id="option4"> Family</label></div></div> </div> <!-- QUESTION & ANSWERS 3 --> <div class="questionarea QA3 text-center"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question1">Q3: What do you do together?</p> </ul> <br> <div class="answers"> <div id="row divoption1"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Business </label></div> <br> <div id="row divoption2"> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> Go out</label></div> <br> <div id="row divoption3"><label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Just hold each other</label> </div> <br> <div id="row divoption4"> <label class="btn btn-primary"> <input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div> </div> <!-- QUESTION & ANSWERS 4 --> <div class="questionarea QA4 text-center"> <ul class="col-lg-6 list-group text-center"> <p class="list-group-item question1">Q4: How often do you fight?</p> </ul> <br> <div class="answers"> <div id="row divoption1"> <label class="btn btn-primary"> <input type="radio" name="options" id="option1"> Not much, but when we do, it a big deal </label></div> <br> <div id="row divoption2"> <label class="btn btn-primary"> <input type="radio" name="options" id="option2"> We have lots of harmless tiffs</label></div> <br> <div id="row divoption3"><label class="btn btn-primary"> <input type="radio" name="options" id="option3"> Sometimes</label> </div> <br> <div id="row divoption4"> <label class="btn btn-primary"> <input type="radio" name="options" id="option4"> Play pranks on each other</label></div></div> </div> <!-- ---- --> </div> </body>
+5
source share
1 answer

I created a JSFiddle with your code: https://jsfiddle.net/xr9d5rg1/ (if you can do it yourself next time, it would be very useful: D)

There was something scared, I updated a couple of things in the code:

1 - Updated .size() to .length since it was updated in the latest version of jQuery (ignore it if you are using an older version of jQuery)

2 - Updated link to click, from $('.answers') to $('.answers input') , so it does not accept clicks outside the radio window;

3 - Updated link to a question, for example, proposed by the user 1252748;

It seems to be working correctly now; There may have been some kind of strange event trigger that was called an increment twice;

0
source

More articles:


All Articles