How can i join a string and a variable to create a new variable in javascript?

Question

Found a couple of solutions for php, but couldn't find any for javascript.

Basically I am trying to make a bunch of eventlisteners for 30 buttons i have on my page. Currently it is written out like this :

problem1buttonEl.addEventListener("click", problem1);
problem2buttonEl.addEventListener("click", problem2);
problem3buttonEl.addEventListener("click", problem3);
problem4buttonEl.addEventListener("click", problem4);

Now I want to make a for loop to make this cleaner, something like this:

for (var problemIncrement = 1; problemIncrement <= 30; problemIncrement++) {
'problem' + problemIncrement + 'buttonEl'.addEventListener("click", 
'problem' + problemIncrement);
}

The problem is that i need to add a string to my variable and have the outcome of them also be a variable, as that is what problemXbuttonEl is.

Is there any way to do this?

so you need an array of all your answers and then split it out into a string? — Sandra Willford, Jan 13 '18 at 21:59
https://stackoverflow.com/questions/5613834/convert-string-to-variable-name-in-javascript — Adam, Jan 13 '18 at 22:06

Nina Scholz · Answer 1 · 2018-01-13T22:19:56.437

1

Why not use a closure with an argument for the number of the identifier for the button like

function problem(n) {
    return function () {
        // do something with n
    }
}

for (var i = 1; i <= 30; i++) {
    getElementById('problem' + i + 'buttonEl').addEventListener("click", problem(i));
}

edited Jan 13 '18 at 22:19

answered Jan 13 '18 at 22:06

Nina Scholz

376,160
25
347
392

Ah thats a smart integration of the getElemtById part too, thanks! – Jorgen Jan 14 '18 at 01:58

score 1 · Accepted Answer · answered Jan 13 '18 at 22:18

You can use the brackets notation [] to get these variables, normally they should be defined in the window object so this is how should be your code:

for (var problemIncrement = 1; problemIncrement <= 30; problemIncrement++) {
    window['problem' + problemIncrement + 'buttonEl'].addEventListener("click", 
    window['problem' + problemIncrement]);
}

Here window['problem' + problemIncrement + 'buttonEl'] will refer to the varibale you already defined.

Well u sir just cut out 143 lines of code, thank you very much! — Jorgen, Jan 14 '18 at 02:29

score 0 · Answer 3 · answered Jan 13 '18 at 22:14

0

var resultsArray = [1, 2, 3];
var resultsString = myArray.join();
problem1buttonEl.addEventListener("click", function() {
  resultsArray.push(problem1)
});

document.write(resultsString);

or something like that!

answered Jan 13 '18 at 22:14

Sandra Willford

3,459
11
49
96

How can i join a string and a variable to create a new variable in javascript?

3 Answers3