Converting Inline-javascript to Javascript

Guess what? You can remove that duplication and have it just as:

.playButton.triggered {
    background-color: transparent;
}

And the background still works.

Get rid of the “display: none” on them and then they’ll work.

I can’t though, cause there are 2 different color gradients. blue 1st orange 2nd.

Oh, so using the gradient you must duplicate everything relating to it. That’s damned annoying, but must be done while you continue to use that technique.

Where is this dot coming from, I need to remove it.

You haven’t said yet on which code it is occurring.

This was causing that dot.

I removed the other piece of code, so that’s probably why.

  <div id="preloaded-images">
     <img src="http://via.placeholder.com/260x260" width="1" height="1" alt="Image 01" />
  </div>

they show on this one:

but not the other one

How do I get the svgs to show?

How come?

The correct solution to that is to remove the preloaded-images from the normal document flow, by making them absolutely positioned, and moving them far off to the top left.

#preloaded-images {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

One at a time please. Which one first?

Fixing the 2nd one.

Tha’s easy. Just follow my instruction on post #22

do I change every button to div?

Why would you do that?

cause I’m not using button, I’m using div?

I don’t see any button elements in the HTML code at https://jsfiddle.net/qgpraopj/6/

These were button I changed them to div.

Just those 2 I changed.

  <div class="playButton">
 </div>

If I but them back to button, the svgs will show.

Did you know why you were changing them?

I’m not using button, I’m using div for all my players.

Why is div better than button for what’s happening there?