So far I have managed to do this on single click.
const div = document.getElementById("sphere");
div.addEventListener("click", e => {
console.log("You clicked the mouse!");
div.style.backgroundColor = "white";
})
How do I make the circle div in the center change color from yellow to white and vice versa on every click inside the circle?
>Solution :
You can just try this way:
const div = document.getElementById("sphere");
div.addEventListener("click", e => {
console.log("You clicked the mouse!");
div.classList.toggle('active')
})#sphere {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
}
img {
width: 50px;
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
}
#sphere.active {
background-color: white;
}<div id="sphere">
<img src="https://freepngimg.com/thumb/bulb/31669-1-bulb-off-transparent-image.png">
</div>