How come one code setup works, while the other one doesn't?

JavaScript
1

This doesn’t work:

.activee {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: #000000;
  cursor: pointer;
  fill: #aaff00;
}

But this one works:

.activee {
 position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: #000000;
  cursor: pointer;
  fill: #aaff00;
}

How come?

What’s the difference between them?

2

You can use diffchecker to compare the CSS code (or other code) between the two versions, to easily find the differences between them.

1 Like
3

I understand that, but how come one code is able to work with just this, .activee{, and the other code isn’t?

4

That’s due to the scripting code being quite different between the two.

5

Wait, let me figure this out. I got this.

6

Now both scripting codes are similar.

How come one code is able to work with just this,

.activee{,

and the other code isn’t?

7

Using diffchecker will help to make it quite clear why.

8

There was only 1 difference.

9

2 differences:

39.	    link.classList.add("activee");	38.	    link.classList.remove("inactivee");
125.	    playButtonClickHandler(evt);
10

What reason is this one required to have .playButtone attached to .activee

.playButtone.activee {

And how come this one is able to work without it?

11

When comparing the two different techniques:

  • add inactive to the play button, then remove that inactive class
  • just add active to the play button

that it was more preferable to do things the second way.

12

On this code?

13

Yes.

14

Like this?


    <svg class="playe inactive" focusable="false" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
15

You might want to explain what you are wanting to achieve.

1 Like
16

There is no inactive class.

17

Yes that is correct. Instead of adding then removing a class called inactive, that code just adds a class called active.

18

What do I do next?

I’m confused by what you said.

Instead of adding then removing a class called inactive, that code just adds a class called active.

19

You still haven’t said what you want to achieve.

1 Like
20

I still have no idea what the purpose of adding inactive to this was.

    <svg class="playe inactive" focusable="false" width="38" height="40" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">