Converting Javascript from short syntax to long form

I’m doing this because, I want to be able to do this from memory, and not just by copying and pasting.

Let’s start with this one.

 (function iife() {
   "use strict";

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

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

   function playButtonClickHandler() {
     var button = document.querySelector(".playButton");
     var player = document.querySelector("audio");
     var play = button.querySelector(".play");
     var pause = button.querySelector(".pause");
     hide(button.querySelector(".initial"));
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
       button.classList.add("playing");
     } else {
       show(play);
       hide(pause);
       player.pause();
     }
   }

    function playButtonMouseoverHandler() {
    var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      var speaker = button.querySelector(".speaker");
      var pause = button.querySelector(".pause");
      player.isPlaying = function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(speaker);
        show(pause);
      }
    }

    function playButtonMouseoutHandler() {
    var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      var pause = button.querySelector(".pause");
      var speaker = button.querySelector(".speaker");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        hide(pause);
        show(speaker);
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

Multi Button: 1 Audio: classList Long syntax


(function iife() {
   "use strict";

   function playButtonClickHandler() {
     var button = document.querySelector(".playButton");
     var player = document.querySelector("audio");
     button.querySelector(".initial").classList.add("hide");
     player.volume = 1.0;
     if (player.paused) {
       button.querySelector(".play").classList.add("hide");
       button.querySelector(".pause").classList.remove("hide");
       player.play();
       button.classList.add("active");
     } else {
       button.querySelector(".play").classList.remove("hide");
       button.querySelector(".pause").classList.add("hide");
       player.pause();
     }
   }

    function playButtonMouseoverHandler() {
    var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        button.querySelector(".speaker").classList.add("hide");
        button.querySelector(".pause ").classList.remove("hide");
      }
    }

    function playButtonMouseoutHandler() {
    var button = document.querySelector(".playButton");
      var player = button.querySelector("audio");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        button.querySelector(".pause").classList.add("hide");
        button.querySelector(".speaker").classList.remove("hide");
      }
    }
    var playButton = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

.style version 1

<style>
  .playButton2 {
    position: relative;
    width: 260px;
    height: 260px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
    border: 3px solid #0059dd;
  }
  
  .playButton2.active {
    border: 3px solid #e77d19;
    background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
  }
  
  .initial2,
  .pause2,
  .play2,
  .speaker2 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .initial2 {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
  }
  
  .pause2,
  .play2 {
    stroke: #e77d19;
    stroke-width: 3px;
    fill: transparent;
    display: none;
  }
  
  .speaker2 {
    fill: #1ed760;
    fill-rule: evenodd;
    display: none;
  }

</style>
<div class="playButton2">
  <svg class="initial2" width="90" height="108" viewbox="0 -10 85 120">
    <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"></path>
  </svg>

  <svg class="pause2" width="90" height="108" viewbox="-13 -10 85 120">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="speaker2" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"></path>
  </svg>

  <svg class="play2" width="90" height="108" viewbox="0 -10 85 120">
    <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"></path>
  </svg>
</div>

<audio id="player2" preload="none">
  <source src="" type="audio/mpeg">
</audio>

<script>
  (function iife() {
    "use strict";

    function playButtonClickHandler() {
      var button = document.querySelector(".playButton2");
      var player = document.querySelector("#player2");
      document.querySelector(".playButton2 .initial2").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("active");
        document.querySelector(".playButton2 .play2").style.display = "none";
        document.querySelector(".playButton2 .pause2").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton2 .pause2").style.display = "none";
        document.querySelector(".playButton2 .play2").style.display = "inline-block";
        player.pause();
      }
    }

    function playButtonMouseoverHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying= function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .speaker2").style.display = "none";
        document.querySelector(".playButton2 .pause2").style.display = "inline-block";
      }
    }

    function playButtonMouseoutHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying= function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .pause2").style.display = "none";
        document.querySelector(".playButton2 .speaker2").style.display = "inline-block";
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

</script>

If you want to be able to do things without just using copy/paste, then learn how things work - repeating stuff from memory is no better than copy/paste if you don’t understand them.

5 Likes

There are no scripting errors, so it’s going to be a logic error that you are making in the code.

The initial play button isn’t being hidden, even though it should be. So that’s the first place to look.

1 Like

.style version 2

<style>
  .playButton2 {
    position: relative;
    width: 260px;
    height: 260px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
    border: 3px solid #0059dd;
  }
  
  .playButton2.active {
    border: 3px solid #e77d19;
    background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px), url("https://via.placeholder.com/260x260");
  }
  
  .initial2,
  .pause2,
  .play2,
  .speaker2 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .initial2 {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
  }
  
  .pause2,
  .play2 {
    stroke: #e77d19;
    stroke-width: 3px;
    fill: transparent;
    display: none;
  }
  
  .speaker2 {
    fill: #1ed760;
    fill-rule: evenodd;
    display: none;
  }

</style>
<div class="playButton2">
  <svg class="initial2" width="90" height="108" viewbox="0 -10 85 120">
    <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"></path>
  </svg>

  <svg class="pause2" width="90" height="108" viewbox="-13 -10 85 120">
    <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
  </svg>

  <svg class="speaker2" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"></path>
  </svg>

  <svg class="play2" width="90" height="108" viewbox="0 -10 85 120">
    <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"></path>
  </svg>
</div>


<audio id="player2" preload="none">
  <source src="" type="audio/mpeg">
  </source>
</audio>
<script>
  (function iife() {
    "use strict";

    function playButtonClickHandler() {
      var button = document.querySelector(".playButton2");
      var player = document.querySelector("#player2");
      playButton.querySelector(".initial2").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("active");
        playButton.querySelector(".play2").style.display = "none";
        playButton.querySelector(" .pause2").style.display = "inline-block";
        player.play();
      } else {
        playButton.querySelector(".pause2").style.display = "none";
        playButton.querySelector(".play2").style.display = "inline-block";
        player.pause();
      }
    }

    function playButtonMouseoverHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying = function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        playButton.querySelector(".speaker2").style.display = "none";
        playButton.querySelector(" .pause2").style.display = "inline-block";
      }
    }

    function playButtonMouseoutHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        playButton.querySelector(".pause2").style.display = "none";
        playButton.querySelector(".speaker2").style.display = "inline-block";
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
    playButton.addEventListener("mouseover", playButtonMouseoverHandler);
    playButton.addEventListener("mouseout", playButtonMouseoutHandler);
  }());

</script>

With the broken initial play button at https://jsfiddle.net/8qh0huka/33/ to fix up, we can use Chrome to set a breakpoint on attribute modification of the initial button.

When clicking on the initial play button, the click handler is seen to remove hide from the initial button.
That’s messed up, because it already not hidden. The click handler needs instead to hide the initial button.

That fixes the initial button, but there’s other work that’s needed on the mouseover and mouseout states.

Let me know if you want to proceed with this.

Let’s proceed.

Before it was this:
hide(button.querySelector(“.initial”));

I changed it to this:
button.querySelector(".initial").classList.remove("hide");

In the click handler there is code that shows the initial button. That needs to hide the initial button instead.

button.querySelector(".initial").classList.add("hide");

Next we can move on to comparing what happens when play and pause the button, versus what is supposed to happen instead.

The mosuseover works as it’s supposed to.

No it’s not, nevermind.

After you click on it, only pause should be showing.

Let’s make a chart of what happens, and compare it with what’s supposed to occur.

After you click: Pause shows

mouse out, speaker shows
Those 2 interchange back and forth

click: play stays.

This is how it worked using .style:

    function playButtonMouseoverHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying = function isPaused() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .speaker2").style.display = "none";
        document.querySelector(".playButton2 .pause2").style.display = "inline-block";
      }
    }

    function playButtonMouseoutHandler() {
      var player = document.querySelector("#player2");
      player.isPlaying = function isPlaying() {
        return player.paused === false;
      };
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .pause2").style.display = "none";
        document.querySelector(".playButton2 .speaker2").style.display = "inline-block";
      }

I remember you telling me, those inline-blocks, should be blocks, right?

Correct?

I think I missrememberd, and it was about a different code.

#2

Fixed: I had add/remove reversed.

That’s a confusion that is much less likely to occur when you use show/hide functions.

1 Like

With that other code that you have up above, using show/hide functions will help to make it easier to do the conversion. For example:

function hide(el) {
    el.style.display = "none";
}

When both show and hide use style.display, the code can be transformed over to using those show/hide functions, and you can test that the code still works which helps to ensure that you haven’t broken anything.

Then, once all of the code has been converted to using show/hide, it is much easier to transition over to using show/hide class names, because you only have those two functions that need to be updated, instead of all of the rest of the code.

1 Like