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


#332

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


#333

I don't understand.


#334

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.


#335

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


   function togglePlayButton(button) {

#336

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


#337

Yes.....
https://jsfiddle.net/q76sf3f2/39/


#338

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.


#339

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


#340

What lines???


#341

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


#342

https://jsfiddle.net/q76sf3f2/40/

     hide(button.querySelector(".initial"));
     show(wrap.querySelector(".myLink"));
     player.volume = 1.0;
     if (player.paused) {
       hide(play);
       show(pause);
       player.play();
     } else {
       show(play);
       hide(pause);
       player.pause();
     }

#343

Version 2


#344

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.


#345

Can I use any of this code?
https://jsfiddle.net/q76sf3f2/41/


#346

I just need to do this part then:

    document.querySelector(".myLink1").classList.add("hide");
    var playButton = document.querySelector(".playButton1");
    playButton.addEventListener("click", firstClick);
    var player = document.querySelector("#player1");
		function firstClick() {
      document.querySelector(".myLink1").classList.remove("hide");
      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";
      button.classList.add("playing");
    }
    function playButtonClickHandler() {

#347

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.


#348

Can I easily put that code into here?
https://jsfiddle.net/q76sf3f2/40/


#349

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.


#350

Which code? The code from https://jsfiddle.net/q76sf3f2/41/ ?

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


#351

I lost the entire thing I was working on.