Changing text colour with CSS in jQuery

Question

I am displaying results of a quiz and want it to show a green correct or a red incorrect beside the corresponding question. I have a PHP file holding the questions, that returns true or false depending on whether the users answer was correct or not. My code below shows how my results are shown (in a table, with true or false being shown). I've tried an if statement to say if that field equals true, make it green, else red. But nothing works. I just want to transform 'true' into a green 'correct' and 'false' into a red incorrect using jQuery.

Related JavaScript code:

$("#tblextendedresults tbody").prepend("<br>")
$.each(extendedResults, function(i) {
    $("#tblextendedresults tbody").append("<tr><td>" + extendedResults[i]["question"] + "</td><td>" + extendedResults[i]["your_answer"] + "</td><td>" + extendedResults[i]["correct"] + "</td></tr>")
    if (extendedResults[i]["correct"] == "true") {
        $(this).css("color", "green");
    }
    else {
        $(this).css("color", "red");
    }
})

Related HTML code:

<table id="tblextendedresults">
    <thead>
        <th>Question</th>
        <th>Your answer</th>
        <th>Correct?</th>
    </thead>
    <br>
    <tbody></tbody>
</table>

Also 'extendedResults' is an array that each question and chosen answer are pushed to. Any help would be appreciated. Thanks!

jQuery css() code looks fine, can you verify that the $(this) is the actual field ? — ArturoO
– ArturoO, Commented Sep 11, 2016 at 9:20
@ArturoO its the if statement that is wrong I believe. the "extendedResults[i]["correct"] returns the proper true/false depending on if the answer was correct or not, but the if statement isnt altering this return at all. And I also don't know how to change the text to say correct instead of true — Brittany
– Brittany, Commented Sep 11, 2016 at 9:25

Karthikeyan Vedi · Accepted Answer · 2016-09-11 12:59:51Z

3

Try using last:child Selector - $("#tblextendedresults tbody tr:last-child td:last-child")

$(this) in your code does not refer the appropriate element.

JSFiddle

var extendedResults = [{
  "question": "Question1",
  "your_answer": "your_answer1",
  "correct": true
}, {
  "question": "Question2",
  "your_answer": "your_answer2",
  "correct": false
}, {
  "question": "Question3",
  "your_answer": "your_answer3",
  "correct": true
}];

$("#tblextendedresults tbody").prepend("<br>")

$.each(extendedResults, function(i) {
  $("#tblextendedresults tbody").append("<tr><td>" + extendedResults[i]["question"] + "</td><td>" + extendedResults[i]["your_answer"] + "</td><td>" + extendedResults[i]["correct"] + "</td></tr>")

  if (extendedResults[i]["correct"] == true) {
    $("#tblextendedresults tbody tr:last-child td:last-child").css("color", "green").html("Correct");
  } else {
    $("#tblextendedresults tbody tr:last-child td:last-child").css("color", "red").html("Incorrect");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="tblextendedresults">
  <thead>
    <th>Question</th>
    <th>Your answer</th>
    <th>Correct?</th>
  </thead>
  <br>
  <tbody></tbody>
</table>

edited Sep 11, 2016 at 12:59

answered Sep 11, 2016 at 9:28

Karthikeyan Vedi

1,3601 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brittany Over a year ago

Thanks so much! I thought something like this might be the case but wasn't sure how to do it. Any idea on if I could make the 'true' elements say 'correct' and the 'false' elements say 'incorrect' instead..?

Collectives™ on Stack Overflow

Changing text colour with CSS in jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related