Despite my code appearing correct, the styles are not being applied even though the class is added. It was functioning perfectly before, so I'm not sure what caused this issue now. Any assistance would be greatly appreciated!
JavaScript code:
let maxAmountMessageTimeoutId;
// Displaying Max Amount Added Message
export function displayMaxAmountMessage(productId) {
const maxAmountMessage = document.querySelector(`.js-max-amount-message-${productId}`);
maxAmountMessage.classList.add("max-amount-message-visible");
if (maxAmountMessageTimeoutId) {
clearTimeout(maxAmountMessageTimeoutId);
}
const timeoutId = setTimeout(() => {
maxAmountMessage.classList.remove("max-amount-message-visible");
}, 2000);
maxAmountMessageTimeoutId = timeoutId;
console.log(maxAmountMessage.className);
}
CSS code:
.max-amount-message {
color: red;
font-size: 15px;
opacity: 0;
}
.max-amount-message-visible {
opacity: 1;
}
I have attempted to place the function in the main file and declared "let maxAmountMessageTimeoutId;" as a global variable outside of the click event listener scope, but nothing seems to work. If I remove the line "let maxAmountMessageTimeoutId;", the message displays but errors occur and clearTimeout does not function properly.