JS: Interpolate a variable into a variable

Question

In the code below, I am trying to set the text for my 4 buttons. Would appreciate a helping hand with:

allButtons[i].innerHTML = btn${i};

and particularly with

btn${i}

I am trying to pass to .innerHTML the text stored above, but so far failed to do it. Most attempts I tried led to:

Uncaught SyntaxError: Unexpected token {

Question: how can I interpolate a variable into a variable in JS? The code:

  var btn0 = "Load tasks from server";
  var btn1 = "Load tasks from Local Storage";
  var btn2 = "Create tasks";
  var btn3 = "Edit tasks";

  var allButtons = document.getElementsByTagName('button');

  function setText( btn0, btn1, btn2, btn3, allButtons ) {
    var allButtons = document.getElementsByTagName('button');

    for (i = 0; i < allButtons.length; i++) {
      console.log(i);
      allButtons[i].innerHTML = btn${i}; // interpolation issue
    }
  }

Why not make an array and all your problems are solved? – Sami Kuhmonen Mar 25 '18 at 20:45 — Sami Kuhmonen, Mar 25 '18 at 20:45
To find the gap of my understanding of interpolation. – urgant Mar 25 '18 at 20:45 — urgant, Mar 25 '18 at 20:45

Adriano Martins · Answer 1 · 2018-03-25T21:00:36.843

1

You can't access a variable that way. The easiest solution is:

var btnTexts = ["Load tasks from server", "Load tasks from Local Storage", "Create tasks", "Edit tasks"];

var allButtons = document.getElementsByTagName('button');

function setText( allButtons ) {
    for (i = 0; i < allButtons.length; i++) {
        console.log(i);
        allButtons[i].innerHTML = btnTexts[i];
    }
}

// Then call the function using: setText(allButtons);

edited Mar 25 '18 at 21:00

answered Mar 25 '18 at 20:47

Adriano Martins

1,788
1
19
23

1

Yep, that indeed works, but I was learning interpolation. It has no practical value, only learning. Though, thx. – urgant Mar 25 '18 at 21:03

Ele · Answer 2 · 2018-03-25T21:07:50.037

You can't do that in js.

An alternative is using an object with the set of texts, and use the string interpolation (Template literals) to build the specific key + i.
Use textContent instead because is only text.

var btns = {
  btn0: "Load tasks from server",
  btn1: "Load tasks from Local Storage",
  btn2: "Create tasks",
  btn3: "Edit tasks"
}

function setText(allButtons) {
  for (i = 0; i < allButtons.length; i++) {
    allButtons[i].textContent = btns[`btn${i}`];
  }
}

var allButtons = document.getElementsByTagName('button');
setText(allButtons);

<button></button>
<button></button>
<button></button>
<button></button>

I could do this in Ruby, piece of a memory. Got your idea, very useful to know. — urgant, Mar 25 '18 at 21:06

score 0 · Answer 3 · answered Mar 25 '18 at 20:48

0

ES6 interpolation works inside back-tick quotes strings, but it doesn't work in expressions like that.

The only thing that would work sort of the way you want -- and it's certainly not recommended -- would be to do an eval on an interpolated string. As someone else said, you're better off with an array.

NOT RECOMMENDED:

allButtons[i].innerHTML = eval(`btn${i}`);

answered Mar 25 '18 at 20:48

kshetline

12,547
4
37
73

Clear, thx. Interesting and good to know. – urgant Mar 25 '18 at 21:02
Interesting enough to up-vote my answer to make up for the fact that someone decided to down-vote it? :) – kshetline Mar 25 '18 at 21:06
Nope, its viceversa. That is possible to do in Ruby. The fact that smb downvoted your answer does not influence the fact that your answer clarified my question. – urgant Mar 25 '18 at 21:08

JS: Interpolate a variable into a variable

3 Answers3