Not seeing the square links with javascript disabled

JavaScript
428

It is the section that adds the event listener that I’m speaking about.

  var playButton = document.querySelector(".wrapa");
  playButton.addEventListener("click", playButtonClickHandler);
1 Like
429

I thought you were talking about this.

  function pauseAllButtons() {
    var buttons = document.querySelectorAll(".wrapa, .wrapb, .wrapc, .wrapd, .wrape, .wrapf ");
    buttons.forEach(function hidePause(button) {
      if (isPlaying(button)) {
        showPlayButton(button);
      }
    });
  }
431

With that one, you can replace them one at a time, for example:

var buttons = document.querySelectorAll(".playButton, .playButton, .wrapc, .wrapd, .wrape, .wrapf ");

and when they repeat, replace that repetition with only one of them:

var buttons = document.querySelectorAll(".playButton, .wrapc, .wrapd, .wrape, .wrapf ");
432

wrap c isn’t functioning properly.

433

There, the B code is messing around with the C button when it’s not yet ready to do that.

// codeB
  var playButtons = document.querySelectorAll(".playButton");
  playButtons.forEach(function(button) {
    button.addEventListener("click", initialOverlayClickHandler);
  });

have that code use wrapb, until further improvements are made that let you remove that restriction:

  var playButtons = document.querySelectorAll(".playButton.wrapb");
434

The buttons on C don’t change back and forth.

435

You made a spelling mistake, where playButton must instead be .playButton

The fullstop tells JavaScript that it’s a classname. No fullstop says that its a tag name.

436

And with those fixes, they are all broken.

437

Player C is fixed, all the others are broken.

What did I mess up?

438

It’s only the querySelector and querySelectorAll sections that have a fullstop in front of playButton.
When using classList, that only deals with class names so you don’t put the fullstop in front of the name.

1 Like
439

Fixed it, and now none of them are functioning.

What on earth did I do wrong here?

440

You still haven’t fixed line 13

441

while (el.classList.contains(".playButton") === false) {

442

The classlist uses only classnames, so the fullstop doesn’t belong there.

443

I thought you meant to put them on all of them.

444

No - I expect some intelligence to be applied too.

2 Likes
445

I got it, now it’s working.

I’m continuing.

446

The overall plan is to have one set of JavaScript code that works with all of the buttons, resulting in only the following code that will work with all of the buttons:

var playButton = (function iife() {
  ...
}());
playButton.init(".playButton");

Before we can do that, we need to creep up on it a piece at a time, getting the code for each of the buttons working separately, with:

var playButton = (function iife() {
  ...
}());
playButton.init(".playButton.wrapa");
playButton.init(".playButton.wrapb");
playButton.init(".playButton.wrapc");
...

And before that can be done, codeA should be updated so that it can do what’s required by codeB and codeC, which you saw me working on up above, until my progress became interrupted by your current disasters.

Eventually though we’ll be able to work our way to a better situation.

Normally, development doesn’t happen this way. Instead of copying everything to multiple different sets that must all be managed all together, the much easier type of development is to extend the working of one set of code, so that it is easily capable of handling multiple things.

447

Good code is easy to delete, and I plan to delete a lot of code.

448

How do I fix this?



  function playButtonClickHandler(evt) {
    var button = upTo(evt.target, ".playButton");
    togglePlayButton(button);
  }

  function initialOverlayClickHandler() {
    var wrapper = document.querySelector(".wrape");
    var button = wrapper.querySelector(".playButton");
    hideInitialOverlay(wrapper);
    showPlayButton(button);
    wrapper.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
  }

  function initButton(selector) {
    var wrapper = document.querySelector(selector);
    var button = wrapper.querySelector(".playButton");
    wrapper.classList.add("inactive");
    wrapper.addEventListener("click", initialOverlayClickHandler);
    hideAllButtons(button);
  }
  initButton(".wrape");
}());