Random, if statement, and event.target

Question

I'm new to Javascript and I have an issue with event.target. The thing is that I use Math.random to display a number, then use an if statement so that if you click on the image corresponding to the number, it gets bigger, and if you click on another image, its opacity changes.

It works perfectly in Chrome and IE, but not in Firefox (which is a classic, I know).

Here's my code:

var sunrise_sunset = [19, 20 ,6, 7];
var night = [21, 22, 23, 0, 1, 2, 3, 4, 5];
var day = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
var hours = sunrise_sunset.concat(night).concat(day);

var randomHour = Math.floor(Math.random() * hours.length);

{document.getElementById("soleil").addEventListener("click", function(){checkAnswer(sunrise_sunset)}, false);
 document.getElementById("nuit").addEventListener("click", function(){checkAnswer(night)}, false);
 document.getElementById("jour").addEventListener("click", function(){checkAnswer(day)}, false);
}

function checkAnswer(array) {  
  var isCorrect = false;
  for(var i = 0; i<array.length; i++) {
    if(array[i] == randomHour){
      isCorrect = true;
      break;
    }
  }

  if(isCorrect) {
    event.target.style.width=500;

  }
  else {
    event.target.style.opacity = 0.5;
  }
};

<input class="img" type="image" id="soleil" src="img/soleil.jpg" alt="soleil">
<input class="img" type="image" id="jour" src="img/jour.jpg" alt="jour">
<input class="img" type="image" id="nuit" src="img/nuit.jpg" alt="nuit">

So my question is, how can I make it work in Firefox? Should I just change my if statement? I read tons of posts in which they redefine the event through a function, but I don't see how I can do that with the random value and the if statement. I'm not saying there is no way, just that I don't see it...

score 0 · Answer 1 · answered Jan 25 '16 at 13:23

The answer is in Andreas comment link. The event parameter needs to be passed to your checkAnswer method. IE and Chrome define the event globally but firefox only defines it as a function parameter. In my opinion you should pass it as a parameter any way.

Try the following code, see the new parameter event is being passed. I tested it in firefoxs. Its working after making these changes.

var sunrise_sunset = [19, 20 ,6, 7];
   var night = [21, 22, 23, 0, 1, 2, 3, 4, 5];
   var day = [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18];
   var hours = sunrise_sunset.concat(night).concat(day);

   var randomHour = Math.floor(Math.random() * hours.length);

{
    document.getElementById("soleil").addEventListener("click", function(e){checkAnswer(e, sunrise_sunset)}, false);
    document.getElementById("nuit").addEventListener("click", function(e){checkAnswer(e, night)}, false);
    document.getElementById("jour").addEventListener("click", function(e){checkAnswer(e, day)}, false);
}

function checkAnswer(event, array) {  
  var isCorrect = false;
  for(var i = 0; i<array.length; i++) {
    if(array[i] == randomHour){
        isCorrect = true;
      break;
    }
  }

  if(isCorrect){
        event.target.style.width=500;
  }else{
      event.target.style.opacity = 0.5;
  }
};

Random, if statement, and event.target

1 Answers1