Prevent clicking on the black border

Clicking on the black border turns it on.

The button part is the middle part.

What would be changed in the code to have only the middle part be clickable?

Multiple buttons.

https://jsfiddle.net/pc47hwgd/

I was able to do it when there is only 1 button, but not when there are multiple buttons on the screen.

https://jsfiddle.net/gypw370q/

  const playButtons = document.querySelector(".button");
  playButtons.addEventListener("click", playButtonClickHandler);
}());

Answer

You need set click event listener on buttons, not wrapper around of them

  const playButtons = document.querySelectorAll(".button");
  playButtons.forEach(e => e.addEventListener("click", playButtonClickHandler));