Two versions of a playButton Binding Audio With a grid link structure

There are other more advanced techniques that can be applied though, such as by using a module to init the play button, which can maintain a consistent reference to the play and pause buttons for each button.

You can show me that if it’s not a huge code.

Is there one of these I can make for this?
button.classList.remove("playing");

  function hide(el) {
    el.classList.add("hide");
  }

This doesn’t work:

        show(playing);
      } else {
        hide(playing);

This doesn’t work either:


        add(playing);
      } else {
        remove(playing);

Do I add this:
var button = button.querySelector(".playing");

It would involve using some kind of module system, which is similar to the IIFE one that we’ve been using.

For example:

var playButton = (function playButtonModule() {
    var button;
    var play;
    var pause;
    function addEventListeners(button) {
        ...
    }
    function initPlayButton(el) {
        button = el;
        play = button.querySelector("play");
        pause = button.querySelector("pause");
        addEventListeners(button);
    }
    return {
        init: initPlayButton
    };
}());
document.querySelectorAll(".playButton").forEach(function (button) {
    playButton.init(button);
});

It’s a structure similar to that which can be used.

When I want to work on this I’ll let you know.

This is a very good idea, I like it. I just have a couple of other things I want to finish up first with the codes I’ve been working on.

What am I doing wrong here?

The answer to that one is in the console too. Who would’ve thought.

1 Like

I remove this:
var button button.querySelector(".playing");

What else needs to be done to use the short syntax?

button.classList.remove("playing");


        add(playing);
      } else {
        remove(playing);

or should I be using this:

        show(playing);
      } else {
        hide(playing);

    function show(el) {
      el.classList.remove("hide");
    }

    function hide(el) {
      el.classList.add("hide");
    }

    function togglePlayButton(button) {
      var player = button.querySelector("audio");
      var play = button.querySelector(".play");
      var pause = button.querySelector(".pause"); 
      player.volume = 1.0;
      if (player.paused) {
        hide(play);
        show(pause);
        player.play();
        show(playing);
      } else {
        hide(playing);
        show(play);
        hide(pause);
        player.pause();
      }

The browser console tells you what’s not defined on that page.

Updated jsfiddle:

Useless info is useless.

1 Like

ReferenceError: playing is not defined
[Learn More]
_display:92:9
togglePlayButton
https://fiddle.jshell.net/_display/:92:9
playButtonClickHandler

togglePlayButton
https://fiddle.jshell.net/_display/:93:9

playButtonClickHandler
https://fiddle.jshell.net/_display/:114:7

Loading mixed (insecure) display content “http://hi5.1980s.fm/;” on a secure page
[Learn More]
23
ReferenceError: playing is not defined
[Learn More]
_display:95:9
togglePlayButton
https://fiddle.jshell.net/_display/:95:9
playButtonClickHandler

The issue is, I don’t know how to set this up cause I never did this type before.

Converting this
button.classList.remove(“playing”);

to the short syntax

 var button = button.querySelector(".playing");
show(playing);
hide(playing);

I’ve only done this before:


 var play = button.querySelector(".play");
      var pause = button.querySelector(".pause");
        hide(play);
        show(pause);

The playing classname is only added to the element. show/hide aren’t used for that.

I have to use this:
button.classList.remove("playing");

A short syntax won’t work?


       add(playing);
      } else {
        remove(playing);

You can make a function to do it, but when that function is effectively used only once, and it doesn’t help to beneficially simplify things or aid in understanding, there’s not much point in having that function in the first place.