I have an event listener which listens for a click on an element, and then runs a function that checks if the background colour of the element is white. Here is my code:

setting.addEventListener("click", (e) => {
       if (e.target.style.backgroundColor == "white") {
           e.target.style.backgroundColor = "black";
       } else {
           console.log(e.target.style.backgroundColor);
           e.target.style.backgroundColor = "white";
       }
});

My intention is that the element will first turn black, since its background colour is white.

Here is my css for this element:

.toggle {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    right: 300px;
    outline: 3px solid black;
    border: 3px solid white;
}

The console log in the js logs this message:

<empty string>

Why is this happening, and how should I fix it?