點擊動態元素的背景顏色

Question

我是JavaScript新手， 我用JavaScript創建了兩個動態div。當我點擊第一個div時，它變得活躍。我想要點擊它時改變div背景顏色，然後當它變得活躍時。當我點擊第二個div時，第二個div應該改變背景顏色，第一個div將它取回原來的顏色。

我想要改變btnCage和btnMice的bgcolor，當我同時點擊。

var buttonDiv= document.createElement('div'); 

var btnCage = document.createElement('div'); 
btnCage.id = 'btnCage'; 
//btnCage.className = 'active'; 
btnCage.innerHTML = 'By Cages'; 
buttonDiv.appendChild(btnCage); 
btnCage.onclick = function() { 
    getMonthlyCensusCages() 
} 

var btnMice = document.createElement('div'); 
btnMice.id = 'btnMice'; 
//btnMice.className = 'active'; 
btnMice.innerHTML = 'By Mice'; 
buttonDiv.appendChild(btnMice); 
btnMice.onclick = function() { 
    getMonthlyCensus() 
} 

請幫我

Answer 1

你可以這樣做：

btnMice.onclick = function() { 
    this.style.backgroundColor = '#f00'; 
    btnCage.style.backgroundColor = '#ccc'; 
}; 

btnCage.onclick = function() { 
    this.style.backgroundColor = '#f00'; 
    btnMice.style.backgroundColor = '#ccc'; 
}; 

Answer 2

var buttonDiv= document.createElement('div'); 

var btnCage = document.createElement('div'); 
btnCage.id = 'btnCage'; 
//btnCage.className = 'active'; 
btnCage.innerHTML = 'By Cages'; 
buttonDiv.appendChild(btnCage); 

var btnMice = document.createElement('div'); 
btnMice.id = 'btnMice'; 
//btnMice.className = 'active'; 
btnMice.innerHTML = 'By Mice'; 
buttonDiv.appendChild(btnMice); 

// change style or change className 
btnCage.onclick = function() { 
    this.style.backgroundColor = 'red'; 
    btnMice.style.backgroundColor = 'black'; 
    getMonthlyCensusCages(); 
} 

btnMice.onclick = function() { 
    this.style.backgroundColor = 'red'; 
    btnCage.style.backgroundColor = 'black'; 
    getMonthlyCensus(); 
}