BackgroundColor未定義

我不明白爲什麼這不起作用。它說backgroundColor是未定義的。我試圖讓它改變顏色，當點擊和點擊作品，但它不會改變顏色。我認爲一切工作減去，但希望有人在這裏可以幫助我。或者，如果您有任何關於如何改進它的建議，那將會很棒。 BackgroundColor未定義

var squares=document.getElementsByClassName('squares'); 
 

 
for(var i = 0; i < squares.length; i++) { 
 
    squares[0].addEventListener("click", changeColor); 
 
} 
 

 
function changeColor(event) { 
 
    console.log("I work"); 
 
    event.style.backgroundColor=randomColor(); 
 

 
} 
 

 
//the code below is fine if you're trying to debug it you've gone too far 
 
function randomColor() { 
 

 
    var randomRed = Math.floor(Math.random() * 255); 
 
    var randomGreen = Math.floor(Math.random() * 255); 
 
    var randomBlue = Math.floor(Math.random() * 255); 
 
    //create the string that is the ‘random color’ 
 
    var randomColor = "rgb("+randomRed+","+randomGreen+","+randomBlue+")"; 
 

 
    return randomColor; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>FIX IT.</title> 
 
    <style> 
 
     .square { 
 
      width: 100px; 
 
      height: 100px; 
 
      background-color: #000000; 
 
      margin: 5px; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <div id="container"> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
    </div> 
 

 
    <script src="main.js"></script> 
 
</body> 
 
</html>

來源

2015-04-22 dumbeetle

'event'不具有的樣式屬性。 –

您需要使用this獲得該事件發生的元素。

function changeColor(event) { 
    console.log("I work"); 
    this.style.backgroundColor = randomColor(); 
}

來源

2015-04-22 16:49:30

應該event.target當您設置backgroundColor。

像這樣：(event.target).style.backgroundColor=randomColor();

event.target將指被點擊了div元素。這樣你可以添加任何風格。

所以，你的改變的代碼看起來像下面這樣：

var squares=document.getElementsByClassName('squares'); 
 

 
for(var i = 0; i < squares.length; i++) { 
 
    squares[0].addEventListener("click", changeColor); 
 
} 
 

 
function changeColor(event) { 
 
    console.log("I work"); 
 
    (event.target).style.backgroundColor=randomColor(); // Observe the difference here 
 

 
} 
 

 
//the code below is fine if you're trying to debug it you've gone too far 
 
function randomColor() { 
 

 
    var randomRed = Math.floor(Math.random() * 255); 
 
    var randomGreen = Math.floor(Math.random() * 255); 
 
    var randomBlue = Math.floor(Math.random() * 255); 
 
    //create the string that is the ‘random color’ 
 
    var randomColor = "rgb("+randomRed+","+randomGreen+","+randomBlue+")"; 
 

 
    return randomColor; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>FIX IT.</title> 
 
    <style> 
 
     .square { 
 
      width: 100px; 
 
      height: 100px; 
 
      background-color: #000000; 
 
      margin: 5px; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <div id="container"> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
     <div class="square" onclick="changeColor(event)"></div> 
 
    </div> 
 

 
    <script src="main.js"></script> 
 
</body> 
 
</html>

來源

2015-04-22 16:49:54

BackgroundColor未定義

回答

相關問題