Open SuperSimpleDev opened 1 year ago
check this out that took little bit of time to figure out that the even "Enter" is should be for the input not the save this shall work !!
document.querySelectorAll(".quantity-input").forEach((save) => {
save.addEventListener("keydown", (event) => {
if (event.key === "Enter") {
console.log("ca marche");
const productId = save.dataset.productId;
const quantityInput = document.querySelector(
.quantity-input-${productId}
);
const newQuantity = Number(quantityInput.value);
if (newQuantity > 0 && newQuantity < 1000) {
document
.querySelector(.cart-item-container-${productId}
)
.classList.remove("is-editing-quantity");
updateQuantity(productId, newQuantity);
} else if (newQuantity >= 1000) {
alert("Please enter a quantity less than 1000 units.");
} else if (newQuantity < 0) {
alert("Please enter a positive quantity; negative values are not allowed.");
}
}
});
});
Or:
document.querySelectorAll('.quantity-input').forEach((keyEnt) => { keyEnt.addEventListener('keydown', (event) => { if (event.key === 'Enter') { const productId = keyEnt.dataset.productId;
const container = document.querySelector(
`.js-cart-item-container-${productId}`
);
container.classList.remove('is-editing-quantity');
const quantityInput = document.querySelector(`.js-quantity-input-${productId}`);
const newQuantity = Number(quantityInput.value);
if (newQuantity < 0 || newQuantity >= 100) {
alert('Quantity must be at least 0 and less than 100');
} else {
updateQuantity(productId, newQuantity);
calculateCheckoutQuantity();
var labelQuantity = document.querySelector(`.js-quantity-label-${productId}`);
labelQuantity.innerHTML = newQuantity;
}
}
}) })
i add this code inside (and yeah, i did waste like 7 hours searching google left and right to make it finally functionable. Worth every seconds):
if you are struggling with 14n enter task, copy and try the code below //14n . Hope it helps !
document.querySelectorAll('.js-save-link') .forEach((link) => { link.addEventListener('click', () => { const productId = link.dataset.productId;
const container = document.querySelector(`.js-cart-item-container-${productId}`);
container.classList.remove('is-editing-quantity');
const quantityInput = document.querySelector(
`.js-quantity-input-${productId}`
);
const newQuantity = Number(quantityInput.value);
if(newQuantity < 0 || newQuantity >= 1000){
alert('Quantity must be at least 0 and less than 1000')
return;
}
updateQuantity(productId, newQuantity);
const quantityLabel = document.querySelector(`.js-quantity-label-${productId}`);
quantityLabel.innerHTML = newQuantity;
updateCartQuantity();
});
//14n
const quantityInput = link.closest('.cart-item-container').querySelector('.js-quantity-input-' + link.dataset.productId);
quantityInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
link.click();
}
});
});
@progressive-newbie263 const quantityInput = link.closest('.cart-item-container').querySelector('.js-quantity-input-' + link.dataset.productId); why did we use .closest( ) when every input element has a unique class ?
const quantity = link.querySelector('.js-quantity-input-' + link.dataset.productId); Isn't this more readable and short than the above ? If not then, correct me
@progressive-newbie263 const quantityInput = link.closest('.cart-item-container').querySelector('.js-quantity-input-' + link.dataset.productId); why did we use .closest( ) when every input element has a unique class ?
const quantity = link.querySelector('.js-quantity-input-' + link.dataset.productId); Isn't this more readable and short than the above ? If not then, correct me
i used closest('.cart-item-container') since we are aiming to choose and make all 'update' link interactive. It is like a trick replacement for querySelectorAll, since closest guaranteed it will link to its parent container. If i didn't use closest item container the data will become undefined/null.
But we have the different code structure while doing the homeworks so i am not sure if the code i used were the same as yours tbh.
Hey Simon,
Could you provide the solution to adding the optional 'keydown' challenge? I have managed to get something working but the code is perhaps a little too meandering.
Please see the link for my solution: https://hastebin.com/share/gadinihuta.javascript
Is there a way to do this without referencing js-order-summary? I'd played around with trying to make it work like 'click' event listeners, with no luck.
Thanks :)