[Solved] Javascript conditionals not working on correct button combination

by


I’ve created an example below that I think you can work from. The values from the radio I don’t think get updated until you submit, instead I’ve captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.

var results = {};

function updateResult() {
  var r = results,
      rt = $('#result');
  if (r.q1 && r.q2 && r.q3) {
     rt.text('All Yes');
  } else if (!r.q1 && !r.q2 && !r.q3) {
     rt.text('All No');
  } else {
     rt.text('We have a mixed response');
  }
}

$(function () {
  $('body').on('click', '[name]', function () {
     var $this = $(this),
         page = $this.closest('.page'),
         next_page = $(page.next());
     results[$this.attr('name')] = $(this).val() === 'yes';
     page.removeClass('active');
     next_page.addClass('active');
     if (next_page.hasClass('result')) updateResult();
  });
});
.page {
  display: none;
}

.page.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="page active">
  <div>Question 1</div>
  <label for="q1yes">Yes</label>
  <input id="q1yes" type="radio" name="q1" value="yes">
  <label for="q1no">No</label>
  <input id="q1no" type="radio" name="q1" value="no">
</div>

<div class="page">
  <div>Question 2</div>
  <label for="q2yes">Yes</label>
  <input id="q2yes" type="radio" name="q2" value="yes">
  <label for="q2no">No</label>
  <input id="q2no" type="radio" name="q2" value="no">  
</div>

<div class="page">
  <div>Question 3</div>
  <label for="q3yes">Yes</label>
  <input id="q3yes" type="radio" name="q3" value="yes">
  <label for="q3no">No</label>
  <input id="q3no" type="radio" name="q3" value="no">  
</div>

<div class="page result">
   <label>Results</label>
   <div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>

In the above you are using type=”radio”, that means all type=”radio” with the same name will group together, and not just these two. To group together just give them a name on the input. eg.

<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>

Above you can see I’ve given the 2 inputs the name=”quiz-question-one”, and then for the next question maybe give them a name=”quiz-question-two” etc..

On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.

7

solved Javascript conditionals not working on correct button combination