I'm still getting the hang of jQuery, so please bear with me. :)
The purpose of this code is to color a square with the selected color when clicked if it's white, and turn it back to white if it's already colored. It works fine except for an issue where there's a white spot in between when transitioning from one color to another. For example:
When switching from black to blue, it goes black > white > blue.
Below is a snippet of my code:
$(pixelCanvas).on("click", "td", function(){
let background = $(this).css("background-color");
let isEmpty = !background || background === "rgb(255, 255, 255)" ||
background === "#ffffff";
let isNotColor = background !== color;
if(isEmpty){
$(this).css("background-color", color);
} else if(isNotColor){
$(this).css("background-color", color);
} else {
$(this).css("background-color", "#ffffff");
}
Link to my codepen:
https://codepen.io/ashleighc207/pen/QaezPO
Thank you in advance!!