2016-01-25 89 views
-1

我是JavaScript新手,我有一個問題event.target。問題是我使用Math.random來顯示一個數字,然後使用if語句,這樣如果您單擊與該數字相對應的圖像,該圖像會變大,並且如果您單擊其他圖像,則其不透明度會發生變化。Javascript - Random,if語句和event.target

它可以在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語句來做到這一點。我不是說沒有辦法,只是我沒有看到它...

回答

0

答案在Andreas評論鏈接。事件參數需要傳遞給您的checkAnswer方法。 IE和Chrome全局定義事件,但Firefox只將其定義爲函數參數。在我看來,你應該以任何方式將它作爲參數傳遞。

請嘗試下面的代碼,看看正在傳遞的新參數事件。我在firefoxs中測試過它。它在做出這些改變後工作。

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