smoky forge
https://scrimba.com/scrim/coaf14d2e8c4942f76b475ba1
could someone explain how I would use preventDefault() in the context of my code? I am struggling with this a bit, I've tried a few different ways to incorporate it but I think the issue is with my lack of full understanding of how preventDefault works and where it would be applied to inside the handlePayBtn function,
uncut python
Hey @smoky forge. The only time you need to call event.preventDefault() is if you need to cancel the browsers default behaviour in a specific situation.
For example, if you have a form containing a button with the type=“submit” attribute, that button when clicked will trigger the browsers default form submit function, which among other things causes the page to refresh which isn’t always desirable.
In many cases (including your project here) you will want something else to happen other than that default submit function.
So you can override the default behaviour by using event.preventDefault() on the submit event.
formEl.addEventListener(“submit”, function(event) {
event.preventDefault()
// Your form handling code
})
Now, when the form submit button is clicked, YOUR code runs instead of the default behaviour.
In this case probably the function would just be to close the credit card modal
smoky forge
Hey <@699242882065760366>. The only time you need to call event.preventDefault()...
thank you so much for explaining, super helpful!
uncut python
No worries! It’s working now?
smoky forge
yes! thank you! but i now can't figure out why the close button isn't working @uncut python
uncut python
I’m away from my machine at the moment but will give a hand if you still need it later 🙂
smoky forge
thank you 🙂
plain badge
thank you 🙂
The event listener isn't being added to the "X" button since it's not in the dom until after you click the complete order button.
smoky forge
thank you
ill check that out
also im losing my mind over the images not rendering from my array
plain badge
thank you
i lied. it's this part: const allButtons = document.querySelectorAll('button:not(.pay)'); allButtons.forEach(button => { button.disabled = true;
u want me to take a quick look at the images rendering. that's way easier.
plain badge
nah it's tough ive been doing similar things for menu's the past couple of days. it gets really tough keeping track of everything
it looks like ur close to getting the imgs to work?
smoky forge
hmm nope i dont think so, it's just rendering out the image path and name of images for some reason
plain badge
oh ur super close uhmmm i guess what would u do next
plain badge
np 😄