What if I'm not using wrapper with the initButton?

JavaScript
1

@Paul_Wilkins

When we made the initButton it was originally attached to a wrapper, and looked like this.

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

But what if I wanted to use the initButton on a code that has no wrapper?

Using this as an example:

If I were to put the initButton on this code:

  var playButton = document.querySelector(".wrapf");
  playButton.addEventListener("click", playButtonClickHandler);
}());

That would become this:

    function initButton(selector) {
        var wrapper = document.querySelector(selector);
        var button = wrapper.querySelector(".playButton");
        wrapper.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}())

But there’s no wrapper on that button.

So these lines would change from “wrapper” to “button”

var button = document.querySelector(selector);
button.addEventListener("click", playButtonClickHandler);

But then, what would this line become?
wrapper would become what instead?

var button = wrapper.querySelector(".playButton");

If I change it to document it says it’s already defined
https://jsfiddle.net/bwa3os2v/244/

https://i.imgur.com/7CRZAwn.png

    function initButton(selector) {
        var button = document.querySelector(selector);
        var button = document.querySelector(".playButton");
        button.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}())

Would I delete and remove this line of code from it?

var button = document.querySelector(selector);

But if I do that I would need to change (selector) to a different name and (button) won’t work on there because it says it’s already defined.

function initButton(selector) {

https://i.imgur.com/fo5Jr10.png

And keep this one?

var button = document.querySelector(".playButton");

Or would both of these lines stay in the code and I would do something else?

        var button = document.querySelector(selector);
        var button = document.querySelector(".playButton");

I can keep this line removed, deleted from the code and it works. or would that line stay in the code?
https://jsfiddle.net/bwa3os2v/251/

var button = document.querySelector(".playButton");

    function initButton(selector) {
        var button = document.querySelector(selector);
        button.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}())
2

If an error says “it’s already defined”, then it means it’s literally already defined. You define variables with the var statement and assign variables without it, so it’s wrong to use var button... twice in the same scope.

Only use one, you’re essentially saying “Make button equal this…just kidding, make it this instead”. Also, the error you’re showing literally points to this line as being the cause of the error so delete one (probably the one the second line).

I really encourage you to slow down a bit and learn JavaScript a bit more. You keep repeating the same exact mistakes. Please don’t take this as me knocking you, but it’s a waste of time for everyone to keep telling you the same things over and over.

In the days/weeks you’ve been working on this same exact problem you could have learned how to fix this yourself. Anyways I’m just trying to help you because it’s like groundhog day up in here.

1 Like
4

ok well I’ll just let paul respond since he’s the one you’re asking.

Edit: This was in response to a post you deleted

6

I would also just add that I’ve never used the initButton with anything other than a wrapper, so attaching it to something else would be different.

7

I’m currently looking at how the initButton was originally set up. #326

I’m reading it, but they all use wrapper though, the code I want to use has no wrapper in it.

How would an initButton code work with a wrapper “not specified” in the javascript code?

Is the initButton allowed to use “wrapper” in its function without it being specified in the rest of javascript code? I don’t think so.

It’s just a button code:

Nothing in the javascript says “wrapper”

So, how would an initButton work with this without a wrapper?

(function iife() {
  "use strict";

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

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

  function getButtonContainer(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }

  function hideAllButtons(button) {
    button.querySelectorAll(".play, .pause").forEach(hide);
  }

  function getPlay(button) {
    return button.querySelector(".play");
  }

  function getPause(button) {
    return button.querySelector(".pause");
  }

  function showPlayButton(button) {
    var play = getPlay(button);
    hideAllButtons(button);
    show(play);
    button.classList.remove("active");
  }

  function isPlaying(button) {
    var play = getPlay(button);
    return play.classList.contains("hide");
  }

  function showPauseButton(button) {
    var pause = getPause(button);
    hideAllButtons(button);
    show(pause);
  }

  function getAudio() {
    return document.querySelector("audio");
  }

  function playAudio(player, src) {
    player.volume = 1.0;
    if (player.getAttribute("src") !== src) {
      player.setAttribute("src", src);
    }
    player.play();
  }

  function showButton(button, opts) {
    if (opts.playing) {
      showPlayButton(button);
    } else {
      showPauseButton(button);
    }
  }

  function pauseAudio(player) {
    player.pause();
  }

  function manageAudio(player, opts) {
    if (opts.playing) {
      pauseAudio(player);
    } else {
      playAudio(player, opts.src);
    }
  }

  function togglePlayButton(button) {
    var player = getAudio();
    var playing = isPlaying(button);
    showButton(button, {
      playing
    });
    manageAudio(player, {
      src: button.getAttribute("data-audio"),
      playing
    });
  }

  function playButtonClickHandler(evt) {
    var button = getButtonContainer(evt.target);
    togglePlayButton(button);
  }
  var playButton = document.querySelector(".wrapf");
  playButton.addEventListener("click", playButtonClickHandler);
8

I have this, the code works.

    function initButton(selector) {
        var button = document.querySelector(selector);
        button.addEventListener("click", playButtonClickHandler);
    }
    initButton(".wrapf");
}());

I don’t know what to do about this line, is it needed?
I don’t know whether or not to try and figure out how to put it in, or is it just not needed, or necessary in the code. This is what I’m trying to find out.

var button = wrapper.querySelector(".playButton");
11

Would any of these ways be right, or are they all set up wrong.

If I’m not using wrapper, I would be using either button, or playButton, right.

1.)


  function initButton(selector) {
    var playButton = document.querySelector(selector);
    var button = document.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapf");
}())

2.)


function initButton(selector) {
    var playButton = document.querySelector(selector);
    var button = playButton.querySelector(".playButton");
    playButton.addEventListener("click", playButtonClickHandler);
  }
  initButton(".wrapf");
}())
13

@asasass; I’ve unlisted this, as you’ve just made it clear that you’re not interested in help from anyone but Paul, so there’s no point in showing the topic in the forum index.

Paul will have been notified of the mention, so will be aware of the topic. Whether or not he chooses to respond is up to him.

I suggest you rethink your approach to asking for help. This is a public forum, which means anyone is free to contribute to any thread. Trying to limit responses to a chosen few is not in the spirit of the forums, and future threads of a similar nature may be deleted.

18

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.