Not seeing the square links with javascript disabled

JavaScript
469

In the showPlayButton function, also add a classname called “activated”, and use that in the CSS code.

470 
    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("activated");
    }
471

No, don’t replace what was there. I said “also add”

472

Why would I put activated on player B and not A?

473

For compatibility, when that code is used to control other players.

474

Why did I put active on here if it was never on here before?

What’s the difference?

Please explain.

active added
https://jsfiddle.net/v1gfjnm9/187/


 function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("active");
        button.classList.add("activated");
    }

active removed


    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("activated");
    }
475

It’s best to keep the functions identical, because we are going to combine all of the different sets of code into only one set of code, that can control all of the buttons.

476

Wait wait wait.

So, what you’re saying is:

For when they are combined:

This is used:

        button.classList.add("active");
        button.classList.add("activated");

When they are not combined:

Only this is needed.
button.classList.add("activated");

477

With active on here, with nothing combined,

It’s not doing anything,

Which means it’s not needed in this state.

Correct?

 function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("active");
        button.classList.add("activated");
    }
478

They are both used. The activated class always remains on the button, and the active class is only on the button when it’s playing.

1 Like
479

I don’t understand what you’re saying here.

480

I understand when active is removed I see no difference at all.

active removed


    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("activated");
    }
481

I was supposed to change these to activated too, right?

.wrapb.activated .lines::before,
.wrapb.activated .lines::after {
  background: #e77d19;
}

.wrapb.activated .color::before {
  opacity: 0;
}

.wrapb.activated::before {
  opacity: 1;
  border: 3px solid #e77d19;
}
482

Yes, that’s right.

The reason why both active and activated are in that same function, is so that the function can be easily merged with other code with a minimum of changes.

483

If I’m not merging anything right this second, then it is not needed, right?

active removed

   function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        button.classList.add("activated");
    }
484

You will need to later on. It’s best to keep the functions identical, as that reduces the amount of work that your future-self needs to do.

Look after your future-self - he will thank you.

1 Like
485

This is better then.

    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
        /* button.classList.add("active"); Not needed yet*/
        button.classList.add("activated");
    }
486

No, that is not better. Leave the functions the same as each other.

487

You will need to later on.

But you said it has no value until it’s time to be used.

    function showPauseButton(button) {
        var pause = getPause(button);
        pauseAllButtons();
        hideAllButtons(button);
        show(pause);
         /* button.classList.add("active"); Not needed yet*/
        button.classList.add("activated");
    }
488

Your future-self won’t thank you for this. I’ll remind you of it when the time comes too.

1 Like