In Chrome, this code works just fine. But in Firefox – it does not. I’m stuck…
$(document).ready(function(){
var score = 0;
$('.left').hide();
$('.right').hide();
$("#score h2").html("What emotion is being shown?").hide().fadeIn('slow');
$('.happy').click(function(){
if($(this).hasClass('happy') && $(".thegame").find("img:eq(1)").hasClass("happy")){
$('.left').show();
$('.right').show();
score++;
$(numbz).html(score);
setTimeout(trolli,3000);
function trolli(){
sadgame = $('.thegame').html('<div class="pic"><img class="left" src="img/sadness02.jpg"/ ></div><div class="pic"><img class="sadness" src="img/sad03.jpg"/ ></div><div class="pic"><img class="right" src="img/sadness01.jpg"/ ></div>');
$('.left').hide();
$('.right').hide();
$("h2").removeAttr('id', 'canswer').html("What emotion is being shown?").hide().fadeIn('slow')};
$("h2").attr('id', 'canswer').html("You are correct! Happiness looks the same on everybody!").hide().fadeIn('slow');
} else if(!$(".thegame").find("img:eq(1)").hasClass("happy")){
$("#score h2").attr('id', 'wanser').html("You are not correct! Try again.").hide().fadeIn('slow');
score--;
$(numbz).html(score);
};
});
My HTML:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="stylesheet.css">
<title>
facetest.com
</title>
</head>
<body>
<div id="container">
<div id="answers">
<div class="sadness">
<p class="feelings">SADNESS</p>
</div>
<div class="anger">
<p class="feelings">ANGER</p>
</div>
<div class="surprise">
<p class="feelings">SURPRISE</p>
</div>
<div class="fear">
<p class="feelings">FEAR</p>
</div>
<div class="disgust">
<p class="feelings">DISGUST</p>
</div>
<div class="contempt">
<p class="feelings">CONTEMPT</p>
</div>
<div class="happy">
<p class="feelings">HAPPINESS</p>
</div>
</div>
<div class="thegame">
<div class="pic">
<img class="left" src="img/happy-man.jpg"/ >
</div>
<div class="pic">
<img class="happy" src="img/happy-woman.jpg"/ >
</div>
<div class="pic">
<img class="right" src="img/happy-celeb.jpg"/ >
</div>
</div>
<div id="score">
<h2 class="emoz">What emotion is being shown?</h2>
<h3 class="playmeist">Score: <div id="numbz">0</div> pts.</h3>
</div>
</div>
</body>
</html>
Again, this code works just fine in Chrome. But not in Firefox. Why is that?
It just keeps giving me 1 point for clicking happiness every time. But only in Firefox.
If you launch firebug in Firefox you can see the problem. It isn’t finding your trolli function.
Try moving that function and your score variable outside the scope of your document.ready call.