Mani Mani - 2 months ago 8
CSS Question

Javascript conditionals not working on correct button combination

I have 5 if else conditions under function

getRadioButtonValue
. The function does not go through all the conditions even after clicking the right button combinations.

I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?

Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.

Only the first if conditions work, but nothing else

The results are seen after
Get Result
button is clicked on the last page which should redirect to the appropriate page.

[DELETED CODE]

[UPDATED CODE]

I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.



<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>

</head>
<body>

<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<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>
</div>

<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>

<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>

<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>

<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>

<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>

<script type="text/javascript">
var results = {};

function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}

$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>




Answer

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.