0

I've been researching and trying different solutions to this literally all day.

** EDIT: regarding duplicate post: As I wrote below, a set timeout function has been attempted and successful around the function call. Please, before you close my question, atleast ask that what you’re describing as a duplicate hasn’t already been attempted… or in this case. INCLUDED in my original post. I’m not looking for cred, I’m looking for help. **

I have a reusable function takes in 3 params:

  • What to wrap,
  • wrap in what type of element
  • and the id of the new wrapping element (so I can control access it later.)

Here's a codeSandbox version to help you help me!
https://codesandbox.io/s/queryselector-to-globe-jbffk0?file=/index.html

Goal: I'd like to include a querySelector within the function that takes in the id to eliminate the extra step, to ensure the selector is defined after the item is created, and to keep a cleaner code-base. The problem is I keep fighting between a function that's surrounded by parens...
Var wrap = (function(params){...})(window); to potentially give global scope to the queryselector(object ref) I'm trying to create, and a standard es6 function I'm more familiar with... Var wrap = (params) => {...};

    import "./styles.css";

    const item = document.querySelector(".item");

    var wrap = (function (toWrap, wrapper, id) {
      wrapper = wrapper || document.createElement("div");
      wrapper.setAttribute("id", `${id}`);
      toWrap.parentNode.appendChild(wrapper);

      // Non-working auto id something to
      // window.id = document.querySelector(`${id}`);

      return wrapper.appendChild(toWrap);
    })(window);

    // How can I "store the window.id" just as if it were manually written right here in global scope?

    wrap(item, "div", "itemadded");

Note: the window thing I read at: http://markdalgleish.com/2011/03/self-executing-anonymous-functions/

Like I said, I can provide more working code/attempts to show I've made a ton of effort if anyone is wondering.

PS, I'll definitely mark the answer and give upvotes for help. Thanks in advance!

If your still reading, I've tried simplifying even further, adding a timeout function to ensure that the function takes in toWrap correctly... idk what else to try... :(

Michael Martell
  • 141
  • 2
  • 16
  • It's really unclear what you're doing with `window` there or what you mean by _"include a querySelector within the function that takes in the id to eliminate the extra step"_. What _extra step_? – Phil Dec 07 '22 at 00:50
  • Have you tried something like [this answer](https://stackoverflow.com/a/63330776/283366) using `clone()` and `replaceWith()`? Or [this answer](https://stackoverflow.com/a/57377341/283366) using `insertBefore()`? – Phil Dec 07 '22 at 00:55
  • @Phil the step of including a query selector outside the function itself… like if the element is already on screen, I can create the variable. By including it in the function I can name the Variable = the id. – Michael Martell Dec 07 '22 at 01:33
  • @Phil. No I have never heard of those methods before. – Michael Martell Dec 07 '22 at 01:34
  • The issue with your current code is the whole `(...)(window)` thing. You're only calling your function with one arg, `window`. Here's your Sandbox with all the suggestions applied ~ https://codesandbox.io/s/queryselector-to-globe-forked-6snjzc?file=/src/index.js – Phil Dec 07 '22 at 01:45
  • Yes and thank you for your willingness to help. I got that. The goal, in bold above was to get it to create a query selector. Ie: const itemadded =document.queryselector('#itemadded') but inside the function. And then it needs to be accessible globally. – Michael Martell Dec 07 '22 at 01:52
  • I've re-opened your question but it really needs some clarification. I suspect this is a bit of an [XY Problem](https://xyproblem.info/). Could you please revisit [this comment](https://stackoverflow.com/questions/74710549/vanilla-js-hoisting-a-queryselected-variable-to-window#comment131861036_74710549)? Why do you need to run `querySelector()` when you already have the element reference in `wrapper`? What problem are you trying to solve? – Phil Dec 07 '22 at 01:53
  • The element reference in the wrapper needs global scope unfortunately. But if it's located outside of the function, I have no control over how long to set a timeout or even if the elements have posted to the page. For me no problem... for someone else I can't be certain of their internet speed; unless it's called after the creation of the element ie: within the function. Normally, I would just make a new html element, but im bound by only using JS, and creating/manipulating elements there. – Michael Martell Dec 07 '22 at 02:00
  • 1
    Can you not just `return wrapper` from the function and assign it into whatever scope makes sense? `const wrapper = wrap(toWrap, "div", "itemadded")` – Phil Dec 07 '22 at 02:02
  • yes, That solved my issue. oooohhhh, returning the wrapper, gives it global scope. I'm sorry I missed that in your code example... On one hand I have my tail between my legs. on the other hand, im extremely thankful for your assistance. Ive had this question specifically for months... Thank you. Your welcome to close as im sure its not helping anyone. – Michael Martell Dec 07 '22 at 02:16
  • 1
    Well no, it doesn't _"give it global scope"_, it just lets you assign it to a variable. You also could have run `wrap(...); const wrapper = document.getElementById("itemadded");` since you gave the wrapper an `id` – Phil Dec 07 '22 at 02:17
  • What's the difference between global scope and being available globally? Or is it not? Sorry, I'm (clearly) self taught) – Michael Martell Dec 07 '22 at 02:28

0 Answers0