Getting initial to work at the top of the code?



It works fine here:

No issue:

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


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.


Use diff Checker to see the differences:

It works fine here:

And this one:


It works fine here:

And this one:



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.


I have to go look for it.

It's in here somewhere.


function initialOverlayClickHandler(evt) {
    var button = upTo(, ".playButtone");
    button.removeEventListener("click", initialOverlayClickHandler);
    button.addEventListener("click", playButtonClickHandler);

  function init(button) {
    var initial = button.querySelector(".initiale");
    var player = getAudio();
    button.removeEventListener("click", playButtonClickHandler);
    initial.addEventListener("click", initialOverlayClickHandler);
  return {

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() {
  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() {
  it("isn't playing when we ")

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


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.


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


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


How come it's not working?


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




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


TypeError: button is undefined


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.


I forget how to do that.


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


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


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.