0

I’m trying to store a lot of text in an array (so I can easily pull it out using a value). The issue is within the strings I’d like to use template literals so the string changes depending on input (e.g. once they’ve added their name, it uses their name.

I can get this working no problem if I include the string in the function. For example:

textbox.textContent =  `what does ${nameTemp} do?`;

That works no problem, it changes "nameTemp" to what the user inputted. But this below does not! It always returns "tim" as the name (the default value for "nameTemp")

textbox.textContent2 = Title[1];

You can see in the code below in the function saveName() that the first line (with the full string including the template literal does work. But the line below, using the string from the array (with the template literal in) does not update. It uses the default string ‘tim’. What am I doing wrong? How can i best store strings in an array that have chanagable elements? Thanks in advance for any suggestions. 

var nameTemp = `tim`;

let Title = [];
Title[0] = "What are you called?";
Title[1] = `what does ${nameTemp} do?`;

const input = document.createElement('input');
input.type = "text";
input.id ="nameText";
input.className +='inputStyle';

 function addNameInput()
    {
     container.appendChild(input);
    }

 function saveName()
    {
     if (nameText.value !== null)
     {
     nameTemp = nameText.value;
     textbox.textContent =  `what does ${nameTemp} do?`; //This works, it displays the inputed name
     textbox.textContent2 = Title[1];  // This will always display 'tim'
     nameText.parentNode.removeChild(nameText);
     incrementState();
     }
    }
user13057690
  • 7
  • 3

1 Answers1

5

Javascript template strings are evaluated when you first create them, and they don't magically update. Title[1] is initialized with "tim", and even after you change the nameTemp variable it'll remain the same. If you want to store template strings in an array then you can store a function that returns a template string, like:

Title[1] = () => `what does ${nameTemp} do?`;

then you can get the value via

textbox.textContent2 = Title[1]();
Aplet123
  • 33,825
  • 1
  • 29
  • 55
  • You legend! That’s working great!! Much appreciated. I’d tried a number of things ‘almost’ along those lines, but just couldn’t figure it. Thank you very much! – user13057690 Apr 16 '20 at 14:02
  • thanks again for your help in this. Any ideas how you make this into a nested array? I’ve been trying but can’t get it to work. I’ve trying to get something like Title[1][1], however, if I try a normal nested array it returns the string, not the value. If I get a nested array I can’t get the length:`code` let testC = []; testC[1,1] = () => `You are ${_name}.`; testC[1,2] = () => `Now ${_name} do something `; `code` This works, in that I can use testC[x,y] to control it, but I can’t get the length of “y” (the second array. – user13057690 Apr 24 '20 at 15:39
  • `testC[1, 1]` won't work since `1, 1` evaluates to `1` which means `testC[1, 1]` is just `testC[1]`. – Aplet123 Apr 24 '20 at 15:47