Getting initial to work at the top of the code?



I forget how to do that.


  function getPlay(button) {
    return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf");


    return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf"); debugger;


Because you've changed the HTML structure, the scripting also needs to change so that it can once again find what it needs.

It's helpful to have the script go up to a common parent, from where it can find what it needs.

Because we know what's going wrong, and what we can expect from the behaviour of the button when things are going right, now is the best time to add some test code that will initially fail, and when we've fixed the problem will pass.


What does this tell you?


The framework for the test code involves adding some external resources, and a test runner to the bottom of the code. The code at is a good template for how to do this.

Those external resources are:

And that test runner code to add to the end of the code is:

// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());

We can now add our tests above that test runner, starting with the most basic test first to check that all of the plumbing works properly.

describe("Play button E with initial title image", function () {
  it("can do a basic test", function () {


That tells me that you've fixed the problem, and will never know if the problem occurs again unless you personally test each an every feature of the button every time that you make an adjustment to it.


How did I fix the problem, if no audio is playing?

There's no sound.


Web console isn't telling me anything.


The normal steps are:

  • investigate the problem
  • use a test to document what's supposed to occur instead
  • make the test pass, then
  • refactor to improve the code

Do you want to do things properly or not.


I want the sound to come out and it's not.


I'll try asking again tomorrow then. Merry Christmas.


Then I would need to start from this code.

This is the one where the sound works.

Let's start testing.....


Help me to understand what purpose this code serves.


.title {
  display: block;


.title {
  display: block;

I see no visual difference, what exactly is its purpose?


A better question is, how come this code doesn't require a display property?

And this one does?
I don't even know what the reason was, why a display property was added to it to begin with.

If a div is a block element by default, why would someone add it to the CSS?

<div class="title"></div>

.inactive .title {
  display: block;

It seems to me to be completely unnecessary.
@PaulOB #182


I have 2 questions for you concerning your markup of the CSS.

The first question is:

What purpose was this meant to serve in the code, what's it for?

The second question is:

What purpose was this meant to serve in the code, what's it for?
.inactive .title{display:block;}

When I remove both codes from the CSS, I see no difference.

Are those codes needed, or necessary at all?


Wait a second:

<h1 class="title">Links</h1>

Is an inline-block; display property.

That's why you had put display:block; on it.

If it was a div instead of h1, then display:block; can be omitted.

I think I have that right.

Now that would just leave my first question that's remaining.

What purpose was this meant to serve in the code, what's it for?

When I remove it from the CSS, I see no difference.

Is that needed, or necessary at all?


You can't look at CSS rules in isolation. You need to look at the bigger picture.

You only want the "Links" text to display when the player is inactive, don't you? You don't want it there all the time. So adding display: none; prevents it showing.

But when it has the class of inactive, you do want the text to show, so you have to override the display: none; and set it back to its default state of display: block;

Absolute Positioning elements
Absolute Positioning elements
Not seeing the square links with javascript disabled

Removing both

.inactive .title{display:block;}

Would be wrong to do, even if it works without them?

What I mean is, are those codes necessary at all, if without them added, there's no visual difference.


Firstly, as I've said before, PaulOB is not only more of an expert on CSS than I am, but he's more of an expert on CSS than most folk (and not just folk on these forums), so if he gives you working code, you'd be wise to accept it, rather than try picking it apart to "improve" it.

That said, it looks as if .hidee is also being used to hide the intital image and text, so it may not be necessary to use both. I'm guessing Paul included both sets of rules to ensure it didn't break if you made changes to one or other. I haven't looked at it in detail, or tested it in other browsers, so I may have missed something.