Issue
My code seems to be fine, when I console.log the class name it shows that the class is added, but the styles are not working. It was working just fine before but idk what triggered this problem now. Any help would be appreciated!
JS code:
let maxAmountMessageTimeoutId;
// Max Amount Added Message Visibility
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 tried putting the function in the main file, and put "let maxAmountMessageTimeoutId;" before the click event listener out of scope as a global variable but nothing I try works. If I delete the line "let maxAmountMessageTimeoutId;" then the message appears but invokes errors and clearTimeout doesn't work obviously.
Solution
I found out the problem lol. Apparently my code was fine here, the problem resided elsewhere in my code.
// Increment Quantity Button
document.querySelectorAll('.increment-quantity-button')
.forEach((button) => {
button.addEventListener('click', () => {
const {productId} = button.dataset;
updateSelectorValue();
renderHeader();
renderCheckoutTitle();
renderOrderSummary();
incrementCartQuantity(productId); // Contains the function displayMaxAmountMessage()
});
});
I originally put the incrementCartQuantity(productId)
above all those functions.
All those "render" functions basically refresh the html on page, so I guess the message I wanted to display wasn't displayed bcuz of the refreshing, altho I expected to at least see a glimpse.
It didn't occur to me the order of funcs would matter here lol
Answered By - AFK
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.