jquery print out array value and change its CSS

Question

I have an array

var list= ['A','B','C'], answer=[];

the user will be slecting answers and that will update the answer array.

She/He will be selecting buttons to match up to the list array, and using this

 function response(){

 var allcorrect = 1;

        $.each( list, function( index , value ){ 



              if( value === answer[ index ] ) {

                  console.log( 'Yes',  response[ index ]  );


                } else{

                 console.log( 'No', response[ index ] );
                 allcorrect=0;


                } 

        });


                if (allcorrect==1){


              text = "<p> Correct! You answered: " + response[0] + " and " + response[1] + " and " + response[2]+ "</p> <p> The correct response is A, B, C</p>";


                }  
                else {

                if (allcorrect==0){

              text = "<p> Inorrect. You answered: " + response[0] + " and " + response[1] + " and " + response[2]+ "</p> <p> The correct response is supposed to be  A, B, C</p>";

              }
}

}

So say the person chooses A, D, C, then it will say incorrect, you answered A D C ... etc

What I want to happen is for A and C, which are two correct responses, to be changed to red font and for D to remain black since it is incorrect.

How do I add a class to this?

Generally, red is for wrong but...

A. Wolff
– A. Wolff

2013-05-06 15:21:55 +00:00
Commented May 6, 2013 at 15:21 — A. Wolff
– A. Wolff, Commented May 6, 2013 at 15:21

Alexis Reyes · Accepted Answer · 2013-05-06 16:42:14Z

1

why don't you just make each response its own element with an id so you can access it later. While you are creating elements you can just go ahead and add styling to the wrong ones or give them a class as well.

$("#test").html("response 1:" + "<p id='response" + 1 + "' class='class'>" + responses[0] + "</p>");

or just give each response a unique id that can be accessed later when you check to see if they are correct responses then add the class using .addClass().

$("#test").html($("#test").html() + "<br> response 2:" + "<p id='response" + 2 + "'>" + responses[1] + "</p>");

$("#response2").addClass("class");

http://jsfiddle.net/vjbRt/3/

answered May 6, 2013 at 16:42

Alexis Reyes

1991 gold badge1 silver badge7 bronze badges

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

1 Comment

Y. Zhang Over a year ago

I didn't even consider this, I was trying for something similar but never arrived at this point. thank you! I can use this to fit what I need

Collectives™ on Stack Overflow

jquery print out array value and change its CSS

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