-1

How to get variable declared globaly using name assigned to string variable? In this example copyButtons have data-field="html", second data-filed="css" and so on.

const htmlArea = document.querySelector(".htmlCopy");
const cssArea = document.querySelector(".cssCopy");
const jsArea = document.querySelector(".jsCopy");

const copyButtons = document.querySelectorAll(".copyBtn");

copyButtons.forEach(function(el) {
  el.addEventListener("click", copyTextfield);
});

function copyTextfield() {
  const place = this.dataset.field+"Area";
  //use a variable named like place
}
Konrad Ryczko
  • 13
  • 4
  • See variable varaibles in JS: https://stackoverflow.com/questions/5187530/variable-variables-in-javascript – Nick Parsons Oct 19 '19 at 11:11
  • use bracket notation – Code Maniac Oct 19 '19 at 11:11
  • @CodeManiac I think OP wants to access the variable `htmlArea`, etc... using the string "htmlArea", so they would most likely want to set up an object first, and then use bracket notation – Nick Parsons Oct 19 '19 at 11:13
  • You could just use `this.dataset.field` to form your selector (and so remove the global variables). Eg: `document.querySelector("." +this.dataset.field +"Copy");` – Nick Parsons Oct 19 '19 at 11:32

1 Answers1

0

Use window[varname]. "global variables“ are actually bound to window and foo is equivalent to window.foo is equivalent to window['foo']. You should use as few global variables as possible though. It's much better to assign the data to a object variable that has a well defined scope. Access will be the same, using somevar[...dynamic name... ].

Dinu
  • 1,374
  • 8
  • 21
  • global variables defined with `const` (as seen in the OP's code), don't become a property of the `window`. So this won't work – Nick Parsons Oct 19 '19 at 11:17
  • `const` and `let` and `var` prefixed variables inside a function are not global, they are always local to the call scope or lower to block scope. So I'm not sure what he meant there and which is the global variable he wants to access. I think by "use a variable named like place" he means literally `window.aVariable[place]`. – Dinu Oct 19 '19 at 11:21
  • Yes, but you can't access variables declared with `const` or `let` using `window` even if they're global (https://jsbin.com/lehetalowu/edit?js,console). In the OP's code, they're using `const`, so using the `window` to access these variables won't work – Nick Parsons Oct 19 '19 at 11:24
  • I think by "use a variable named like place" he means literally `window[place]` or `window.aVariable[place]`. Not accessing`place` from outside the function scope. – Dinu Oct 19 '19 at 11:26
  • I was under the impression that OP wants to use it like it like `window[place]`, because place is equal to `this.dataset.field+"Area";`, and `this.dataset.field` is either equal to `"html"` or `"css"`. So `place` will either be `"htmlArea"` or `"cssArea"` which are both variables names. However, it is a little unclear what OP is actually asking, so you may be correct ;) – Nick Parsons Oct 19 '19 at 11:30