I’ve been checking out the code at https://jsfiddle.net/tavcvcu6/64/
Are we all on the same page?
This one.
There are no paragraphs anywhere in that code at all, except for the Links paragraph.
Let’s do this again, so that it can be done properly.
Yes - that’s the one I was using.
(Bear in mind I’m also completely new to this, and have just been following blindly.)
To start over on this, because I could be wrong too, right-click in the breakpoints area and remove all of the breakpoints, then reload the page.
Then what?
With the fresh page, and the browser console open:
Oh, I understand the problem.
I haven’t done it yet, but clicking on the word Links in the image, gives different results than clicking on the background image instead.
Clicking on the background image gives better and clearer results for the purpose of troubleshooting this problem.
target : div.initiale
Okay, so the handler is starting from the initiale
div, and is looking for what?
var button = upTo(evt.target, ".playButtone");
It’s looking for playButtone
Look at the HTML code that you have there, after you reordered things. Out of initiale and playButtone, are they siblings, is there a parent/child relationship between them, or is there some other kind of situation between them in the HTML code?
I don’t know.
Do you know how to tell if HTML elements are siblings, or are children of something else?
If you want a refresher on the topic, we have an excellent article about them, called:
DOM Tips and Techniques: Parent, Child, and Siblings
They are not siblings, they are something else.
If it’s a parent/child situation, which one is the parent and which one is the child?
playButtone is the parent.
Since it’s the top class.
parent
playButtone
child
linkse
<div class="playButtone linkse" data-audio="http://hi5.1980s.fm/;">
<div class="linkse">
Okay, so playButtone is the parent, and the code, here is the code:
var button = upTo(evt.target, ".playButtone");
the code is starting from initiale, which we know is inside of playButtone, and is using upTo to find playButtone.
It should work, but it doesn’t. button is left as being undefined, so what’s going wrong?
The debugger has tools that can help us with this. You’ll see the stepping tools above the callstack panel, that lets you play the code, step over a function, and step into a function.
In this case we want to step in to the upTo function.
What’s supposed to happen?