Change text color based on conditional
<p>I want to change the text color based on the conditional statements. Based on certain combination of the answers for the quiz, I want the text to change color to green, yellow or red. </p>

<p>I have read posts online (using the .css) but the posts only apply those colors to divs. I have one div in which I am printing my result so I am not sure how to incorporate that with just the <code>.text</code> property of JQuery. </p>

<p>I am still new to JQuery so any help with this is help me alot.  </p>

<p><em>Sorry about the long code but thats the only way I can present it properly.</em></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
    background-color: #bf2e1a;
}
header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 100px;
    margin-left: 650px;
    margin-right: 650px;
    margin-top: 150px;
    text-align: center;
    font-size: 60px;
    border-width: 5px;
}

div#main-content {
    margin-top: 100px;
}

div#disclaimer {
    width: 800px;
    height: 100px;
    height: 500px;
    margin: 0 auto;
    margin-top: 200px;
    background: #EFDFBC;
}

div#get-justice {
    position: relative;
    top: 30px;
    padding-top: 10px;
    background-color: #EFDFBC;
    margin: 0 auto;
    width: 600px;
    height: 600px;
}
div#get-justice p {
    background-color: #EFDFBC;
    color: red;
    padding: 40px 40px 4px 40px;
    font-size: 28px;
}
div#get-justice button {
    background-color: red;
    border: none;
    color: white;
    margin-top: 120px;
    padding: 20px 37px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 21px;
    cursor: pointer;
}
h3 {
    background: #EFDFBC;
    text-align: center;
    color: red;
    font-size: 23px;
    padding-top: 25px;
}
div#first-question {
   text-align: center;
}

ul {
    columns: 2;
    background: #EFDFBC;
 text-align: -webkit-left;
}
li {
    text-align: -webkit-match-parent;
    background: #EFDFBC;
    display: block;
    padding: 1px 0px 3px 37px;
}
input#quiz-question-one-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-one-no {
    display: none;
    margin: 11px;
}
label#oneYes {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#oneNo {
    display: inline-block;
    margin: 10px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-two-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-two-no {
    display: none;
    margin: 11px;
}
label#twoYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#twoNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
input#quiz-question-three-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-three-no {
    display: none;
    margin: 11px;
}

label#threeYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
/*label#threeYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#threeNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-four-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-four-no {
    display: none;
    margin: 11px;
}

label#fourYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fourYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fourNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/
input#quiz-question-five-yes {
    display: none;
    margin: 11px;
}
input#quiz-question-five-no {
    display: none;
    margin: 11px;
}

label#fiveYes {
    display: inline-block;
    margin: 10px 208px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inline-block;
    margin: 0px 0 0 -197px;
    padding: 10px 30px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}

/*
label#fiveYes {
    display: inherit;
    margin: 13px 360px 0px 195px;
    padding: 8px 73px 8px 22px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}
label#fiveNo {
    display: inherit;
    margin: -54px 296px 0px 300px;
    padding: 12px 66px 5px 18px;
    background-color: red;
    border-color: #ddd;
    font-size: 33px;
    text-align: center;
}*/

.clientinfo{
 height:445px;
    background-color: #EFDFBC;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 10px 0px 1px 70px;
}

input[type="text"] {
    background-color: white;
    padding: 4px 0px 0px 10px;
    margin: 0px 0px 0px 70px;
}

button {
    display: block;
    margin: 0 auto;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: 45px;
    color: #EFDFBC;
}

button#start {
    display: block;
    margin: 0 auto;
    width: 200px;
    padding: 25px 35px 20px 25px;
    font-size: 35px;
    margin-top: -272px;
    margin-right: 68px;
}

hr {
    width: 165px;
    padding: 1px 0px 0px 0px;
}

div#disclaimer {
    width: 800px;
    padding: 27px 10px 10px 0px;
}

div#questionOneBody {
    background: #EFDFBC;
}
div#questionTwoBody {
    background: #EFDFBC;
}
div#questionThreeBody {
    background: #EFDFBC;
}
div#questionFourBody {
    background: #EFDFBC;
}
div#questionFiveBody {
    background: #EFDFBC;
}
h1 {
    /* padding: 20px 4px 20px; */
    text-align: center;
    margin-top: 25px;
}
/*
h1 {
    //background: #EFDFBC;
    padding: 20px 4px 20px;
    text-align: center;
}
*/

h1#disclaimerHeader{
 background: #EFDFBC;
    padding: 20px 4px 20px;
    text-align: center;
}

p {
    background-color: #EFDFBC;
    font-size: 23px;
    margin: 0 auto;
    padding: 1px 0px 0px 20px;
}

div#disc-container {
    width: 450px;
    background: #EFDFBC;
    padding: 10px 10px 14px 10px;
    border-style: solid;
    border-color: red;
    border-width: 10px;
    margin-left: 20px;
}

a#disclaimerLink {
    text-decoration: none;
}


/*.hideHeader{
 display:none;
}*/

p#greenText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: green;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p#yellowText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: yellow;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}
p#redText {
    background: #EFDFBC;
    display: block;
    width: 800px;
    margin: 0 auto;
    margin-top: 300px;
    font-size: 30px;
    color: red;
    text-align: -webkit-auto;
    padding: 50px 50px 50px 50px;
}

div#questionHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    margin-top: 163px;
    font-size: 28px;
    border-width: 10px;
}

/*div#resultHeader {
    margin-top: 163px;
    font-size: 28px;
    border-width: 10px;
}

div#resultHeader {
    height: 140px;
    color: #EFDFBC;
    border-style: solid;
    margin-bottom: 10px;
    font-size: 28px;
    border-width: 10px;
}*/

div#resultHeader {
    color: #EFDFBC;
    border-style: solid;
    margin-bottom: 10px;
    margin-left: 110px;
    width: 1170px;
    font-size: 28px;
    border-width: 10px;
}

div#quizResult {
    font-size: 20px;
    /* width: 650px; */
    margin: 0 auto;
    background: #EFDFBC;
    height: 600px;
    margin-top: 10px;
}

div#allResult {
    margin: 0 auto;
    margin-left: -350px;
    margin-right: -350px;
    /* background: #EFDFBC; */
}

div#leftResult {
    background: #EFDFBC;
    width: 610px;
}

div#result {
    background: #EFDFBC;
    height: 634px;
    font-size: 26px;
    width: 450px;
    margin-left: 110px;
    padding: 75px 45px 0px 70px;
}

hr#eligibleHr {
    position: absolute;
    margin-top: 57px;
    width: 300px;
    margin-left: 182px;
}

div#calenderToolSideText {
    background: #EFDFBC;
    /* width: 300px; */
    margin-left: 551px;
    margin-bottom: -18px;
    margin-top: -334px;
    padding: 0px 68px 0px 0px;
}

div#rightSide {
    background: #EFDFBC;
    margin-left: 480px;
    margin-top: -659px;
    height: 634px;
    width: 800px;
}

div#rightSide h1 {

    text-align: center;
    margin-top: 25px;
    margin-right: 24px;
    background: #EFDFBC;
    color: red;
    padding: 18px 10px 10px 10px;
}

hr#consultationHR {
    width: 595px;
    margin-right: 77px;
    margin-top: -29px;
}

div#calenderTool {
    background: blue;
    width: 400px;
    height: 330px;
    margin-top: 25px;
    margin-left: 148px;
}

hr#endingHR {
    width: 495px;
    margin-top: 25px;
    color: red;
    width: 597px;
    margin-right: 76px;
    margin-top: 25px;
}

h3#shareQuiz {
    margin-right: 380px;
    margin-top: -9px;
}

p#rightsidePara {
    margin-left: 131px;
    margin-top: -12px;
    color: red;
}

p#rightsideParaTwo {
    margin-left: 136px;
    color: red;
}

h1#eligibleHeader {
    position: absolute;
    margin-left: 180px;
    margin-top: 20px;
    background: #EFDFBC;
    color: red;
}

.verticalLine {
    width: 2px;
    height: 570px;
    position: absolute;
    margin-left: 591px;
    margin-top: -615px;
}


.bkr-header{
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 600px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.hidden {
    display: none;
}
.visible {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 445px;
    background: #EFDFBC;
}
.visible2 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 165px;
    background: #EFDFBC;
}

.visible4 {
    display: block;
    margin: 0 auto;
    width: 650px;
    height: 195px;
    background: #EFDFBC;
}

.visibleHeader {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}

.page {
 display: none;
}

.page.active {
    display: block;
    margin: 0 auto;
    width: 650px;
}

.questions {
    margin: 0px auto;
    width: 650px;
    height: 444px;
    background: #EFDFBC;
}
.questions-header {
    color: #EFDFBC;
    border-style: solid;
    border-color: #EFDFBC;
    top: 153px;
    padding-bottom: 30px;
    padding-top: 30px;
    /* margin-top: 163px; */
    margin: 0 auto;
    width: 650px;
    text-align: center;
    font-size: 60px;
    border-width: 10px;
}
.quiz-questions {
    margin-top: 100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset = "UTF-8"/&gt;
 &lt;title&gt;Questions&lt;/title&gt;
 &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class = "quiz-questions"&gt;
 &lt;div id="first-question" class="page active"&gt;
  &lt;div id="questionHeader"&gt;
   &lt;h1&gt; Question 1 &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="questionOneBody"&gt;
  &lt;h3&gt;Question 1&lt;/h3&gt;
  &lt;ul&gt;
   &lt;li&gt;A&lt;/li&gt;
   &lt;li&gt;B&lt;/li&gt;
  &lt;/ul&gt;
   &lt;hr&gt;
   &lt;input type="radio" name="quizquestionone" id="quiz-question-one-yes" value="yes" /&gt;
   &lt;label for="quiz-question-one-yes" id="oneYes"&gt;Yes&lt;/label&gt;
   &lt;input type="radio" name="quizquestionone" id="quiz-question-one-no" value="no" /&gt;
   &lt;label for="quiz-question-one-no" id="oneNo"&gt;No&lt;/label&gt;
  &lt;/div&gt;
 &lt;/div&gt; 

 &lt;div id="second-question" class="page"&gt;
  &lt;div id="questionHeader"&gt;
   &lt;h1&gt; Question 2 &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="questionTwoBody"&gt;
   &lt;h3&gt;Question 2&lt;/h3&gt;
   &lt;hr&gt;
   &lt;input type="radio" name="quizquestiontwo" id="quiz-question-two-yes" value="yes" /&gt;
   &lt;label for="quiz-question-two-yes" id="twoYes"&gt;Yes&lt;/label&gt;
   &lt;input type="radio" name="quizquestiontwo" id="quiz-question-two-no" value="no" /&gt;
   &lt;label for="quiz-question-two-no" id="twoNo"&gt;No&lt;/label&gt;
  &lt;/div&gt;
 &lt;/div&gt;

 &lt;div id="third-question" class="page"&gt;
  &lt;div id="questionHeader"&gt;
   &lt;h1&gt; Question 3 &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="questionThreeBody"&gt;
   &lt;h3&gt;Question 3&lt;/h3&gt;
   &lt;hr&gt;
   &lt;input type="radio" name="quizquestionthree" id="quiz-question-three-yes" value="yes" /&gt;
   &lt;label for="quiz-question-three-yes" id="threeYes"&gt;Yes&lt;/label&gt;
   &lt;input type="radio" name="quizquestionthree" id="quiz-question-three-no" value="no" /&gt;
   &lt;label for="quiz-question-three-no" id="threeNo"&gt;No&lt;/label&gt;
  &lt;/div&gt;
 &lt;/div&gt;


 &lt;div id="fourth-question" class="page"&gt;
  &lt;div id="questionHeader"&gt;
   &lt;h1&gt; Question 4 &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="questionFourBody"&gt;
   &lt;h3&gt;Question 4&lt;/h3&gt;
   &lt;hr&gt;
   &lt;input type="radio" name="quizquestionfour" id="quiz-question-four-yes" value="yes" /&gt;
   &lt;label for="quiz-question-four-yes" id="fourYes"&gt;Yes&lt;/label&gt;
   &lt;input type="radio" name="quizquestionfour" id="quiz-question-four-no" value="no" /&gt;
   &lt;label for="quiz-question-four-no" id="fourNo"&gt;No&lt;/label&gt;  
  &lt;/div&gt;
 &lt;/div&gt;


 &lt;div id="fifth-question" class="page"&gt;
  &lt;div id="questionHeader"&gt;
   &lt;h1&gt; Question 5 &lt;/h1&gt;
  &lt;/div&gt;
  &lt;div id="questionFiveBody"&gt;
   &lt;h3&gt;Question 5&lt;/h3&gt;
   &lt;hr&gt;
   &lt;input type="radio" name="quizquestionfive" id="quiz-question-five-yes" value="yes" /&gt;
   &lt;label for="quiz-question-five-yes" id="fiveYes"&gt;Yes&lt;/label&gt;
   &lt;input type="radio" name="quizquestionfive" id="quiz-question-five-no" value="no" /&gt;
   &lt;label for="quiz-question-five-no" id="fiveNo"&gt;No&lt;/label&gt;  
  &lt;/div&gt;
 &lt;/div&gt; 

&lt;div class="page result"&gt;
 &lt;div id="allResult"&gt;
  &lt;div id="resultHeader"&gt;
   &lt;h1&gt; Congratulations &lt;/h1&gt;
  &lt;/div&gt;
  &lt;h1 id="eligibleHeader"&gt; You might be eligible. &lt;/h1&gt;
  &lt;hr id="eligibleHr"&gt;
  &lt;div id="result"&gt;
  &lt;/div&gt;
  &lt;!-- Vertical Line --&gt;
  &lt;div class="verticalLine"&gt;
  &lt;/div&gt;
  &lt;!-- Vertical Line End --&gt;
  &lt;div id="rightSide"&gt;
   &lt;h1&gt;Schedule your free consultation now.&lt;/h1&gt;
   &lt;hr id="consultationHR"&gt;
   &lt;div id="calenderTool"&gt;
   &lt;/div&gt;
   &lt;div id="calenderToolSideText"&gt;
    &lt;p&gt;words
    &lt;/p&gt;
    &lt;p&gt;words&lt;/p&gt;
    &lt;br&gt;
    &lt;p&gt;phone#&lt;/p&gt;
    &lt;p&gt;M - F, 8:30 am - 5:00 pm &lt;/p&gt; 
   &lt;/div&gt;
   &lt;hr id="endingHR"&gt;
   &lt;h3 id="shareQuiz"&gt; Share the quiz &lt;/h3&gt;
   &lt;p id="rightsidePara"&gt; Your friends won't see your results,&lt;/p&gt;
   &lt;p id="rightsideParaTwo"&gt;just alink to take it themselves. &lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;

 
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

&lt;script type="text/javascript"&gt;

var results = {};

/*function updateResult() {
  var r = results,
      rt = $('#result');
  if ((r.quizquestionone) &amp;&amp; (r.quizquestiontwo) &amp;&amp; (r.quizquestionthree) &amp;&amp; (r.quizquestionfour) &amp;&amp; (r.quizquestionfive)) {
    rt.text('All Yes');
  } else if ((!r.quizquestionone) &amp;&amp; (!r.quizquestiontwo) &amp;&amp; (!r.quizquestionthree) &amp;&amp; (!r.quizquestionfour) &amp;&amp; (!r.quizquestionfive)) {
    rt.text('All No');
  } else {
    rt.text('We have a mixed response');
  }
}*/

function updateResult() {
  var r = results,
      rt = $('#result');


  if ((r.quizquestionone) &amp;&amp; (r.quizquestiontwo) &amp;&amp; (r.quizquestionthree) &amp;&amp; (r.quizquestionfour) &amp;&amp; (r.quizquestionfive)) {
    rt.text('green text');
  } 
 
  else if ((r.quizquestionone) &amp;&amp; (r.quizquestiontwo) &amp;&amp; (r.quizquestionthree) &amp;&amp; (r.quizquestionfour) &amp;&amp; (!r.quizquestionfive)) {
    rt.text('green text');
  }
  
  else if ((r.quizquestionone) &amp;&amp; (!r.quizquestiontwo) &amp;&amp; (!r.quizquestionthree) &amp;&amp; (r.quizquestionfour) &amp;&amp; (r.quizquestionfive)) {
    rt.text('yellow text');
  }
  
  else if ((r.quizquestionone) &amp;&amp; (!r.quizquestiontwo) &amp;&amp; (!r.quizquestionthree) &amp;&amp; (r.quizquestionfour) &amp;&amp; (!r.quizquestionfive)) {
    rt.text('yellow text');  
  }

  else if ((r.quizquestionone) &amp;&amp; (r.quizquestiontwo) &amp;&amp; (r.quizquestionthree) &amp;&amp; (!r.quizquestionfour) &amp;&amp; (r.quizquestionfive)) {
 rt.text('red text');
  }
  
  else if ((r.quizquestionone) &amp;&amp; (!r.quizquestiontwo) &amp;&amp; (!r.quizquestionthree) &amp;&amp; (!r.quizquestionfour) &amp;&amp; (!r.quizquestionfive)) {
 rt.text('red text');  }
  else{
 rt.text('red text');  }
}

$(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();
  });
});
  
&lt;/script&gt;</code></pre>
</div>
</div>
</p>