Q:

JavaScript Validation Error in my excercise

I am trying to develope a e-learning site for kids. It contains an excercise to select the right answer among the given four options,by seeing the clue image. When the kid selects the right answer,the answer changes to green with right.pngimage,while selecting the wrong answer it changes to red with wrong.png image. the problem here is while clicking on the worng answer for second time shows multiple wrong.png images. the image clue for this question is gift.can anybody help me..
My html code is-
<ul class="list gift">
            <li>gasp</li>
            <li>gift</li>
            <li>golf</li>
            <li>gust</li>
        </ul>

My JavaScript is-
$(document).ready(function() 
         {

     //11111111111111
            $('ul.gift li').click(function(e) 
            { 
                correct = "gift";
                needed = $(this).html();

                if(correct==needed){
                    $( e.target ).closest("li").empty();
                    $innercontent = '<li style="color: green;">'+ needed +'<img src="images/right.png"></li>';
                    $( e.target ).closest("li").html($innercontent);

                    }else{
                        $( e.target ).closest("li").empty();
                        $innercontent = '<li style="color: red;">'+ needed +'<img src="images/wrong.png"></li>';
                        $( e.target ).closest("li").html($innercontent);
                        }   

                            });
});

A:

Your needed variable is causing the problem. 
http://jsfiddle.net/6gkpyhyf/
 needed = $(this).text();

Change from needed = $(this).html(); to needed = $(this).text();

