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


You should probably be a little less demanding to the only person on the forum willing to participate in this fiasco. Just a thought…

This thread is the personification of "learning" without a structured course. In a 1000+ posts you really have yet to learn anything besides for how to ask for code and copy and paste it. You really need to visit a book or course to learn the fundamentals.


I only ask for help with things I can't figure out on my own.

And because of all the code I had help with, I haven't been asking a lot of questions on here as of late.

Only minute things here and there.

Also, someone showing you how to do something, giving you instructions, and you being able to follow those instructions as opposed to demanding code are two different things.


I seem to recall my having made this suggestion before, but I still believe you will learn faster and easier if you spend some time up front to learn
HTML -> CSS -> JavaScript

Not that you need to be an expert at HTML to move on, but familiarity with terminolgy and valid mark-up is good to have. The more the better.

I know other people learn differently than what works for me, so I didn't push. Don't take it personal, but maybe you should reconsider your learning style?


If I remove this
button.removeEventListener("click", initialOverlayClickHandler);

from here:

    function initialOverlayClickHandler(evt) {
        var button = upTo(, ".playButtone");
        button.removeEventListener("click", initialOverlayClickHandler);
        button.addEventListener("click", playButtonClickHandler);

It still works: Code 1

If I remove the same line from Code 2, there's an issue:

Does this mean that Code 1 doesn't need this piece of code, and that I can remove it?
button.removeEventListener("click", initialOverlayClickHandler);

I think you may have said to keep it in there, but I forget.


When you first stand up in the morning you remove your pajamas (if you have any). All other times throughout the day when you stand up you don't need to remove your pajamas. It does no harm if you continue to attempt to remove your pajamas throughout the rest of the day, but it's better if you don't attempt to each time that you stand up.

That's why initialOverlayClickHandler is removed, for it's better behaviour to remove it when there's no further need for it to remain.


I will take that as, Code 1 does not need this code to function, and that it can be removed.
button.removeEventListener("click", initialOverlayClickHandler);


Then you will be attempting to remove your pajamas every time you stand up throughout the day. Don't do that.

Leave the code in there



What piece of code should I remove first?


The initialOverlay handler removes the initial overlay, and only needs to do it once.
Once it's done it's job, there's no need for it to be used as an event handler anymore, so it's best for the code to remove that initialOverlay handler.

Failing to remove it is failing to clean up after yourself. These programming projects are more successful when you leave less rubbish lying around, so that code to remove the event handler needs to be in there.


Don't remove anything.


I need to take some time to study what you've done there.


I didn't do anything, I just want to know how I would remove the image, so only the links and playbutton are showing.

Just so it's easier to test things so I don't have to always click on the image every time I update something inside the links.


This pain that you are experiencing, is precisely why people get computers to do the repetitive tasks of testing their code.
Remember when I brought up the idea of testing yesterday, and on several other earlier occasions too?
You didn't appreciate the information then and weren't feeling pain about it, so you ignored that information.

If we had added a test and then wrote our code to make that test pass, we would have a good range of tests by now that we can use to ensure that everything continues to work as we expect them to work.


At the end of the code, add the following which will click the initial image and make it go away, to help you test things.

// development code for the purpose of testing


That was all that was needed, that's easy.


What if it wasn't for testing, and I wanted to remove initial completely, what would I do in that instance?

Just making sure I'm covering all the fields so I'm not asking this in a week or 2, or something.


Then we would add a test to the code for the new expected behaviour, which also help to protect against other changes to the code causing unwanted behaviour. That test starts off as failing, and then change the code so that it passes.


How do we do that?


or a different test?


We can get in to that when you have some code that you want to make changes to.


This one:

You're showing me how to do this so I know how.