Getting audio players to play their respective streams out of their element


I've been checking out the code at

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:

  • click on the initial image to cause the problem
  • click on the 208:5 that's shown in the console to show you debugger view of the code
  • click on number 207 in the line numbers, to set a breakpoint there
  • click on the initial button again, to trigger the breakpoint


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(, ".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.




  <div class="playButtone linkse" data-audio=";">
<div class="linkse">


Okay, so playButtone is the parent, and the code, here is the code:

var button = upTo(, ".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?