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


You add the show and hide functions, then replace all of the show/hide parts of the code to use those functions instead.


I don't understand.


The show and hide functions are fully shown in that post. Put those functions above the togglePlayButton function.

Then where you have used classList to to show or hide something, replace those lines with the appropriate show or hide function call instead. All of those lines that needed to be changed are also shown in that post.


    function show(el) {
    function hide(el) {

   function togglePlayButton(button) {


What's wrong with that code? Why are you showing it with no explanatory text to explain why you are showing it?




Well done - that's a good example of improving code so that it's much more flexible about future demands on it, and so that it's also easier for developers to understand (including you) when they view that code.


There is still the ".initial" and ".myLink" lines to do though, which were also shown in that other post.


What lines???


Second code section of post #175, first two lines.


     player.volume = 1.0;
     if (player.paused) {
     } else {


Version 2


Yep, go through the Line 1 - Line 18 set of instructions all over again, on that second set of code now, and then carry on with the rest of what needs to be done with your second version of code.


Can I use any of this code?


I just need to do this part then:

    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", firstClick);
    var player = document.querySelector("#player1");
		function firstClick() {
      var button = document.querySelector(".playButton1");
      document.querySelector('.playButton1 .initial1').style.display = 'none';
      playButton.addEventListener("click", playButtonClickHandler);
      document.querySelector(".playButton1 .play1").style.display = "inline-block";
      document.querySelector(".playButton1 .pause1").style.display = "none";
    function playButtonClickHandler() {


Only if you destroy the second version of code.

Work on through the steps, and then compare how both versions differ after bringing things to completion.


Can I easily put that code into here?


The changes that you've been making to the code are a process called refactoring. The important aspect of refactoring is that the resulting behaviour of the code remains unchanged to the user.

All developers refactor their code, where they look for problems in the existing code and find ways to reduce or remove those problems.

Later on you might get in to test-driven development, where a simple small test is written for the next tiny feature that you want to write code for. The test will fail because you haven't written the code for it yet. Then you write the code to make that test pass, and then while the tests all pass, you refactor the code to improve how it's structured.

That fail/pass/refactor system forms a tight and stable loop, that lets you develop quite rapidly, in a stable manner, and whenever the code is in the pass or refactor stage you have fully working code.


Which code? The code from ?

Please remember. You know what you are talking about. Others don't have access to your own thoughts.


I lost the entire thing I was working on.