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


#1407

I've been checking out the code at https://jsfiddle.net/tavcvcu6/64/

Are we all on the same page?


#1408

This one.
https://jsfiddle.net/tavcvcu6/64/


#1409

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.


#1410

Yes - that's the one I was using.

(Bear in mind I'm also completely new to this, and have just been following blindly.)


#1411

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.


#1412

Then what?


#1413

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

#1414

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.


#1415


#1416

target : div.initiale


#1417

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?


#1418

I don't know.


#1419

Do you know how to tell if HTML elements are siblings, or are children of something else?


#1420

If you want a refresher on the topic, we have an excellent article about them, called:
DOM Tips and Techniques: Parent, Child, and Siblings


#1421

They are not siblings, they are something else.


#1422

If it's a parent/child situation, which one is the parent and which one is the child?


#1423

playButtone is the parent.

Since it's the top class.


#1424

parent
playButtone

child
linkse

  <div class="playButtone linkse" data-audio="http://hi5.1980s.fm/;">
  
<div class="linkse">

#1425

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.


#1426

What's supposed to happen?