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

JavaScript
62

It won’t be able to work the way I have it set up?

63

This was the one you solved:

64

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

65

How to I fix this one?

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.

68

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

69
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.

2 Likes
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?

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.

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?