Having an issue setting up an edit function on gradient swatches with active class. The active class is being set correctly in the loop, but the onclick function for the current active class is not working as expected. Here's the code snippet:
editSwatch() {
// Get the container element
let gradDiv = document.getElementById("swatch");
gradDiv.addEventListener("click", function () {
let current = gradDiv.getElementsByClassName("active");
// If there's no active class
if (current.length > 0) {
current[0].classList.add('active');
}
// Add the active class to the current/clicked div
this.classList.add('active');
this.current.addEventListener('click', function () {
console.log("Current Div is active");
})
});
},
The current swatch is highlighted with a border and works visually, but the console log message doesn't display onClick. Additionally, the active class does not persist when moving the mouse away, it needs to be persistent for editing and deleting functions.
CSS code snippet:
#bg-gradient:hover,
#bg-gradient.active {
border: solid 3px rgba(84, 112, 155, 0.7);
}
Check out the demo here
Thank you!