Highlight <li> in function onClick in js

Question

I have a little issue.

I want to highlight the answer when you click on it but the .style seem not working :(

I have a part of html code like this:

<div id="answers-type1">
    <ol>
        <img src="" id="answer-a-img" /><li id="answer-a" ></li>
        <img src="" id="answer-b-img" /><li id="answer-b" ></li>
        <img src="" id="answer-c-img" /><li id="answer-c" ></li>
        <img src="" id="answer-d-img" /><li id="answer-d" ></li>
    </ol>
</div>

and in my script i got this:

$("#answers-type1 li").click(function() {
     $(this).style = "background-color: #FFFF00;";
     if ($(this).text() == goodAnswer)
     {
         alert("JAYJAY");
     }
     else
     {
         alert("pas JAYJAY");
     }
});

the function is well called on each click but the background is not changing i don't understand why :/

I looked over internet and saw a lot of people doing like that

thanks for answers

Stencil · Accepted Answer · 2012-05-24 15:55:25Z

2

Use this

$(this).css("background-color","#FFFF00");

instead of this

this.style = "background-color: #FFFF00;";

answered May 24, 2012 at 15:55

Stencil

1,8831 gold badge18 silver badges19 bronze badges

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

Comments

James Allardice · Accepted Answer · 2012-05-24 15:53:43Z

2

The style is not applied because jQuery objects don't have a style property. You can use the css method instead:

$(this).css("background-color","#FFFF00");

Alternatively, you could use the underlying element (don't pass it to jQuery):

this.style.backgroundColor = "#FFFF00";

The second example will likely be more efficient.

answered May 24, 2012 at 15:53

James Allardice

166k22 gold badges335 silver badges316 bronze badges

Comments

RichardTowers · Accepted Answer · 2012-05-24 15:55:49Z

2

Fixed here: http://jsfiddle.net/RichardTowers/99Zpz/

answered May 24, 2012 at 15:55

RichardTowers

4,7801 gold badge30 silver badges43 bronze badges

Comments

mgraph · Accepted Answer · 2012-05-24 15:53:25Z

1

try:

$(this).css("background-color","#FFFF00");

instead of :

$(this).style = "background-color: #FFFF00;";

answered May 24, 2012 at 15:53

mgraph

15.3k4 gold badges43 silver badges76 bronze badges

Collectives™ on Stack Overflow

Highlight <li> in function onClick in js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related