What are the differences between using = {}; and = "";

[DanCouper]

Declaring a variable, it’s basically one of the first things anyone is taught. It’s also what you have been asking about in this thread: you’ve declared a variable and have then been asking which completely random value to assign to it.

[javascriptcoding5678]

I just noticed the animation fade-out of the play buttons works

With this line removed: https://jsfiddle.net/kLdfr0pv/

//let currentPlayButton;

How can that be though? How is that possible?

function animationEndHandler(evt) {
    const animationName = evt.animationName;

    if (animationName === "initial-fade") {
      body.classList.remove("initial-fade");
      showCover(currentPlayButton);
    }
  }

  function coverClickHandler(evt) {
    currentPlayButton = evt.currentTarget;
    body.classList.add("initial-fade");
  }

[JeremyLT]

It sounds like you don’t understand the basic design of the code you wrote. Perhaps leaning the basic fundamentals of programming would help you understand what you are doing.

[lasjorg]

You are creating a global variable by not declaring it. After you have clicked the button you can check it in the console.

window.currentPlayButton

You would know how and why this works if you had bothered to learn the language you are trying to use.

[javascriptcoding5678]

How am I able to see this? window.currentPlayButton

console inside where?

browser, or jsfiddle?

[lasjorg]

Both but it won’t get logged the same way. The browser console will show the DOM element and the jsfiddle console will show it as an object.

If you manually type window.currentPlayButton in the browser console you have to be inside the correct context. Using Inspect on the page first before going to the console tab should put you in the correct context. Otherwise, you can use the JavaScript context dropdown menu near the top of the browser console tab (dropdown to the right of the clear button).