If I were to put 2 of these on a page, it would look like


#62

It won't be able to work the way I have it set up?
https://jsfiddle.net/j9anqqak/5/


#63

This was the one you solved:
https://jsfiddle.net/muek65ss/13/


#64

Sorry, my correction. It's post #43 where I solved that one, not post 34.


#65

How to I fix this one?
https://jsfiddle.net/j9anqqak/5/

The button variable isn't able to find the element that querySelector is trying to find.


#66

The button variable isn't able to find the element that querySelector is trying to find.

That's what you need to investigate.


#67

I got something working.
https://jsfiddle.net/j9anqqak/6/


#68

Please paste that button querySelector line here that you're having trouble with.


#69

https://jsfiddle.net/j9anqqak/6/


#70

What have you supplied that link for?


#71

I just figured that part out.


#72

It helps to supply some information with the link. Such as:

  • It works now
  • Something else is having trouble, and that something is blah.
  • Thank you for your efforts, it's all good now.
  • You are a god amongst men! Have my babies!

Something like that.


#73

I tried a different code structure and removed all of this.

  <script>
var utils = (function () {
    "use strict";
    function show(el) {
        el.classList.remove("hide");
    }
    function hide(el) {
        el.classList.add("hide");
    }
    function hideAll(items) {
        items.forEach(function hideItem(item) {
            hide(item);
        });
    }

    return {
        show,
        hide,
        hideAll
    };
}());
var images = (function (utils) {
    "use strict";
    var icons = new Map();

    function getSVGIcons(button) {
        var buttonSVG = button.querySelectorAll("svg");
        Array.from(buttonSVG).forEach(function addIcon(svg) {
            var name = svg.getAttribute("class").split(" ")[0];
            icons.set(name, svg);
        });
        return icons;
    }
    function getSVGIcon(name) {
        return icons.get(name);
    }
    function showIcon(iconName) {
        utils.hideAll(icons);
        utils.show(getSVGIcon(iconName));
    }

    return {
        getSVGIcons,
        getSVGIcon,
        showIcon
    };
}(utils));
var togglePlayer = (function (images) {
    "use strict";
    var button;
    var player;

    function isPlaying() {
        return player.paused === false;
    }
    function toggle() {
        if (isPlaying()) {
            player.pause();
            images.showIcon("play");
        } else {
            player.play();
            images.showIcon("pause");
        }
    }
    function togglePlayingHandler() {
        button.classList.add("triggered");
        toggle();
    }
    function showPauseHandler() {
        if (isPlaying()) {
            images.showIcon("pause");
        }
    }
    function showSpeakerHandler() {
        if (isPlaying()) {
            images.showIcon("speaker");
        }
    }
    function init(playButton, audioPlayer) {
        button = playButton;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
        button.addEventListener("mouseover", showPauseHandler, false);
        button.addEventListener("mouseout", showSpeakerHandler, false);
    }
    return {
        init
    };
}(images));
var init = (function (togglePlayer) {
    "use strict";
    function iife() {
        var button = document.querySelector(".playButton");
        var player = document.querySelector(".player");
        togglePlayer.init(button, player);
    }
    iife();
}(togglePlayer));

#74

How came the inline-javascript version doesn't need all that code, and it works?
https://jsfiddle.net/fwdwvc8y/


#75

With all of that inline scripting code scattered about all over the place, it's much harder to manage that code when changes need to occur.


#76

this one is set up as javascript, the same way as inline, and doesn't work right.
https://jsfiddle.net/j9anqqak/6/


#77

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

    function playButtonClickHandler() {
      var button = document.querySelector(".playButton2");
      var player = document.querySelector("#player2");
      document.querySelector(".playButton2 .initial").style.display = "none";
      player.volume = 1.0;
      if (player.paused) {
        button.classList.add("playing");
        document.querySelector(".playButton2 .play").style.display = "none";
        document.querySelector(".playButton2 .pause").style.display = "inline-block";
        player.play();
      } else {
        document.querySelector(".playButton2 .pause").style.display = "none";
        document.querySelector(".playButton2 .play").style.display = "inline-block";
        player.pause();
      }
      " onmouseover="
      var player = document.querySelector("#player2");
      player.isPlaying = function() {
        return player.paused === false;
      }
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .speaker").style.display = "none";
        document.querySelector(".playButton2 .pause").style.display = "inline-block";
      }
      " onmouseout="
      var player = document.querySelector("#player2");
      player.isPlaying = function() {
        return player.paused === false;
      }
      if (player.isPlaying()) {
        document.querySelector(".playButton2 .pause").style.display = "none";
        document.querySelector(".playButton2 .speaker").style.display = "inline-block";
      }
    }
    var playButton = document.querySelector(".playButton2");
    playButton.addEventListener("click", playButtonClickHandler);
  }());

</script>

#78

It looks like the speaker is not being hidden when the player is paused.
You should only need to add some code to hide the speaker when pausing the player.


#79

This is all the inline version uses, why would the javascript code need extra code in it?

<div id="playButton2" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
        player.volume=1.0; if (player.paused) {
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        document.querySelector('#playButton2 .play').style.display='none';
        player.play();
        } else {
    playButton2.style.border='3px solid #e77d19';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='inline-block';
        player.pause();
        }" onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}" onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">

#80

It looks like there are some problems in that code too. For example, the onmouseover and onmouseout strings shouldn't be there.

Sadly I won't have the time before my ride arrives, to delve in to a solution there with you.


#81

the onmouseover and onmouseout strings are in the inline version, what do you mean?