javascript - 单击时更改动态元素的背景颜色

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