随机、if 语句和 event.target

Random, if statement, and event.target

本文关键字:event target 语句 if 随机      更新时间:2023-09-26

我是Javascript的新手,我对event.target有问题。问题是我用Math.random来显示一个数字,然后使用一个if语句,这样如果你点击与数字对应的图像,它会变大,如果你点击另一个图像,它的不透明度就会改变。

它在Chrome和IE中完美运行,但在Firefox中则不然(我知道这是经典的)。

这是我的代码:

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">

所以我的问题是,如何让它在 Firefox 中工作?我应该只更改我的 if 语句吗?我阅读了大量帖子,其中他们通过函数重新定义事件,但我看不出如何使用随机值和 if 语句来做到这一点。我不是说没有办法,只是我看不到...

答案在安德烈亚斯评论链接中。事件参数需要传递给 checkAnswer 方法。IE 和 Chrome 全局定义事件,但 Firefox 仅将其定义为函数参数。在我看来,您应该以任何方式将其作为参数传递。

请尝试以下代码,查看正在传递的新参数事件。我在火狐中测试了它。它在进行这些更改后工作。

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;
  }
};