Home>

As planned, this script should change the color of the block to red, and when you click on another block, the color of the previous block should be reset to its original color (green). How to implement this?

document.querySelector ('. main'). addEventListener ('click', e= >
 {
  if (e.target.className== 'item') {
     e.target.style.background= `$ {e.target.dataset.color}`;
  }
}) 
.main {
  display: flex;
  flex-direction: column;
}
.item {
  padding: 10px;
  background: # 248a52;
  border: 1px solid # 006633;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  color: white;
} 
<
div class= "main" >
  <
div class= "item" data-color= "red" >
Block 1 <
/div >
  <
div class= "item" data-color= "red" >
Block 2 <
/div >
  <
div class= "item" data-color= "red" >
Block 3 <
/div >
  <
div class= "item" data-color= "red" >
Block 4 <
/div >
<
/div >