Getting initial to work at the top of the code?

javascript

#267

It works fine here:
https://jsfiddle.net/ffvkbLjw/26/

No issue:

  function upTo(el, selector) {
    while (el.matches(selector) === false) {
      el = el.parentNode;
    }
    return el;
  }

#268

Do you know of the improved upTo() function that I'm talking about? It checks if comes across the "html" element, and handles that situation more appropriately.

Using that improved function will result in there being a more meaningful error message, to help you figure out what's gone wrong, and from there what needs to be done to make it right.


#269

Use diff Checker to see the differences:

It works fine here:
https://jsfiddle.net/ffvkbLjw/26/

And this one:
https://jsfiddle.net/pmw57/ffvkbLjw/70/


#270

It works fine here:
https://jsfiddle.net/ffvkbLjw/26/
link.classList.remove("inactive");

And this one:
https://jsfiddle.net/pmw57/ffvkbLjw/70/

link.classList.remove("activee");
playButtonClickHandler(evt);


#271

You keep saying that it works fine in other situations.

It works fine in those situations because it's not dealing with the same problems that are happening in the code that you are wanting to fix.

The updated code provides some safety checks to ensure that problems don't happen inside of the upTo() function.


#272

I have to go look for it.

It's in here somewhere.


#273

function initialOverlayClickHandler(evt) {
    var button = upTo(evt.target, ".playButtone");
    console.log(button);
    hideInitialOverlay(button);
    show(getPlay(button));
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);
  }

  function init(button) {
    var initial = button.querySelector(".initiale");
    var player = getAudio();
    showInitialOverlay(button);
    hide(getPlay(button));
    hide(getPause(button));
    pauseAudio(player);
    button.removeEventListener("click", playButtonClickHandler);
    initial.addEventListener("click", initialOverlayClickHandler);
  }
  return {
    upTo,
    init
  };
}());
app.buttone.init(document.querySelector(".playButtone"));

describe("Buttone", function() {
  var button;
  var links;
  var initial;
  beforeEach(function () {
    button = document.querySelector(".playButtone");
    links = button.querySelector(".linkse");
    initial = button.querySelector(".initiale");
  });
  afterEach(function() {
    app.buttone.init(button);
  });
  it("Finds a parent", function() {
    var svg = document.querySelector("svg");
    var path = svg.querySelector("path");
    expect(app.buttone.upTo(path, "svg")).toBe(svg);
  });

  it("Safely handles an unfound element", function() {
    var svg = document.querySelector("svg");
    var path = svg.querySelector("path");
    expect(app.buttone.upTo(svg, "path")).toBeUndefined();
  });

  it("shows links when initial is clicked", function() {
    expect(links.classList.contains("inactive")).toBe(true);
    initial.click();
    expect(links.classList.contains("inactive")).toBe(false);
  });
  
  it("isn't playing when we ")
});

// load jasmine htmlReporter
(function() {
  var env = jasmine.getEnv();
  env.addReporter(new jasmine.HtmlReporter());
  env.execute();
}());

#274

That's okay, I'll wait.

The upTo() function without the safety check was never intended to be the final version of it. You might remember that I was saying that I'll wait until certain problems occur, before updating the function to handle those problems.

This is one of those times that I was waiting for, and helps to provide a good reason for having those safety checks, because it works without interruption when things are going well, and provides more useful behaviour when things aren't going well.


#275

That was to a different version of the code, the one that didn't auto start.


#276

You'll find that the same policy is useful here too.


#277

How come it's not working?
https://jsfiddle.net/ffvkbLjw/91/


#278

It's only the upTo() function that you need from that other code. It looks like you dumped everything else in there as well.


#279

Fixed:

https://jsfiddle.net/ffvkbLjw/95/


#280

Good. Start it playing and you'll see, from what I said before, that the error console gives a more useful error message.


#281

TypeError: button is undefined


#282

That's right. We can set a breakpoint at that function then run the code again, and when clicking on the title image we can follow that undefined button variable through the Call stack all the way to the initialOverlayClickHandler() function.

That function doesn't know how to find the playButton element, from the title section.


#283

I forget how to do that.


#284

  function getPlay(button) {
    return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf");
  }debugger;

#285

    return button.querySelector(".playa, .playb, .playc, .playd, .playe, .playf"); debugger;
  }

#286

Because you've changed the HTML structure, the scripting also needs to change so that it can once again find what it needs.

It's helpful to have the script go up to a common parent, from where it can find what it needs.

Because we know what's going wrong, and what we can expect from the behaviour of the button when things are going right, now is the best time to add some test code that will initially fail, and when we've fixed the problem will pass.