0

I am trying to create dynamic variables using Window. The exact thing I want to do is working fine with eval. But as you may know, that’s not advised.

Some examples.

I may define some variables like this.

var word1 = The; 
var word2 = Number; 
var word3 = Is;
var number = 100;

Now I combine them.

var phrase = word1+word2+word3+number.

If I use the window keyword in front of the phrase variable, then it will work, provided it is at the beginning of the line of code. However, if I try to put window in front of a variable in the middle of a line of code, it doesn’t work. However, eval does work. Example below.

window[phrase]

That will work.

But if it’s something like this

window[newCombinedVariable] = document.querySelector(window[newCombinedVariable2])

That will not work.

However, this will work.

window[newCombinedVariable] = document.querySelector(eval(newCombinedVariable2))

So, window can take a combination of strings with dynamic variables and it works at the beginning, but not in the middle, such as after doc/query selector. But eval works fine that way when using the exact same combined variables.

Can someone suggest what I must do in order for window to give me the same results as eval?

ThomasM1
  • 1
  • 1
  • 1
    "*I am trying to create dynamic variables*" - why? Don't. Use a dictionary (object) if you really need dynamic names for values, but don't put them on `window`. – Bergi Nov 21 '22 at 04:55
  • What is `newCombinedVariable2`? – Bergi Nov 21 '22 at 04:56
  • Your `word1`…`word3` declarations cause errors. Did you mean to use string literals, like `var word1 = 'The';`? – Bergi Nov 21 '22 at 04:57
  • I could be wrong here, but afaik `document.querySelector()` will try to select something that _already exists_. You can't just create a new variable on the fly inside a selector. Well except with `eval()`, but that's because you're literally forcing JS to evaluate the next part as code. – icecub Nov 21 '22 at 05:03
  • The reason I’m creating dynamic variables is I have loads of variables, and they are simply increments of numbers. var Box1 = “content”; var Box2 = “content”; var Box3 = “content”; What I want to do is, using dynamic variables, say var = “box” + i. Where i would be generated from a loop. So the variables would turn into the examples above. This works fine with things similar to the first post. My apologies, I know these may not work correctly. They were just examples. But this is how I have gotten the concept to work so far – ThomasM1 Nov 21 '22 at 05:32
  • Sorry, yeah newCombinedVariable2 is just an example. It could be anything such as var new = "hello" var Combined = "I'm" var Variable = "a Variable" var update = i So basically, I could say var newCombinedVariable = "hello " + "I'm " + "a Variable " + i; That is the most relevant part. If I use window, like below, window[newCombinedVariable] with a loop incrementing i, then it will create newCombinedVariable1, newCombinedVariable2, newCombinedVariable3 and so on. And it will give me the correct results. But with window, it only works at the beginning of a line. – ThomasM1 Nov 21 '22 at 05:46
  • In my html file, if I have 10 boxes, named like so; newCombinedVariable1 newCombinedVariable2 newCombinedVariable3 etc.... So, in my Javascript code, instead of creating this list in hard code, I want to be able to create them dynamically, so I don't need to write out every one of them again. Unfortunately, it's working fine with eval, but not with window. However, @Bergi, are you saying that window used in this way is also bad practice? – ThomasM1 Nov 21 '22 at 05:51
  • 1
    "*I have loads of variables, and they are simply increments of numbers.*"- then what you actually want is an array. Use `const boxes = ["content", "content", "content"];` and in your loop `var box = boxes[i];`, see also the duplicates. Do use neither `eval` nor `window` for this. – Bergi Nov 21 '22 at 06:02
  • I’ve seen this answer before about using an array, but I’m not sure if it can work (or how to make it work). I need to have access to the individual text areas in JavaScript. So how do I create an array that contains the inner html of boxes outside of JavaScript? That’s why I need to be able to update what is inside the query selector. Then I need to get its value. Then pass it to local storage and so on. I need to have some way to update the name inside the query selector brackets. Only then I think I could append each one to the array – ThomasM1 Nov 21 '22 at 09:45
  • You might want to [ask a new question](https://stackoverflow.com/questions/ask) where you post your DOM structure (as html) and your actual code with the selectors that you want to use. Currently it's not clear to me what you are doing. – Bergi Nov 21 '22 at 13:00

0 Answers0