Hey guys. I’ve been working on my portfolio website. Here’s the code (no images or the animations css) that I forked in Codepen. The idea is that each of the four arrows in the homescreen takes you to a new section and clicking the home arrow in that section takes you back.
It’s in the latter one that I’m having a problem. Clicking the down arrow correctly takes you to the portfolio section but clicking the home arrow there triggers a weird loop where the homepage appears but then inmediately afterwards the portfolio section appears again in its place. The functions referenced here are arrowClicked2() and arrowClicked2home().
Just making the portfolio section dissapear works (by setting it’s display to “none” once the arrow is clicked), it’s when triggering the homepage section to appear again (by adding the homepage display = inline in that same function) that this loop is triggered.
I’m pretty sure silly beginner old me is not realizing that the function from the first arrow is still running for some reason. Anyways, can anyone help me with this? That basic mechanism is the basis for the whole site and it’s stalling the whole thing and making me wonder if I’m just doing the whole thing wrong and should throw it out.
I just replaced it like you said. It does solve the issue. I picked the animationend event because there’s a slideOut animation I imported from the animate.css library and I wanted to see the homepage sliding up before dissapearing, but it does not seem worth the hassle. It’s clear that the animation is triggering the thing to dissapear even if I’m setting it not to.
edit: it seems that event listeners look for said “events” anywhere and not the specific ones I thought they did. It’s clear I need to learn more about them before implementing them into the site. This is as much an exercise in practicing as a presentation project.
Thanks !
Events that are triggered on a given element or any of its descendants will be available to that given element.
For example, if I have a <section>...</section> that contains 256 <div></div> elements (think an Etch-A-Sketch, with many cells), then a mouseover event on one of those div elements also happens to the parent container. In this case, it can be darn handy - rather than having a listener attached to each of those children, I can have a single listener attached to the container.
In terms of the DOM, the event is bubbling up the DOM tree. So any event that happens to a given node also happens to all of its ancestors. If you wish, you can intercept and stop that from happening, so the parent nodes don’t get notified. Take a look at Event.stopPropagation()
So, while it looks like every element on the page may be getting every event on the page, there is a very logical structure to which DOM nodes get notified about what events.