Pass a parameter into a function and have that function generate a variable name that contains the passed parameter?

Question

Hi I am fairly new to Javascript. I am trying to pass a parameter into a function and have that function generate a variable name that contains the passed parameter. As you can see below I am trying to generate a variable name from “Q” + ActiveQuestionHolder + “Answer” with a value of document.querySelector(QuestionMenu).value;

In console I am coming up with “SyntaxError: unexpected token: string literal”.

I realize there maybe a better way but I am unsure what that maybe.

function QChoiceFunction(ActiveQuestionHolder) {
    QuestionMenu = "#Q" + ActiveQuestionHolder +"Choices";
    QuestionClassAnswer = ".Q"+ ActiveQuestionHolder +".Answer";

    let "Q" + ActiveQuestionHolder + "Answer" = document.querySelector(QuestionMenu).value; // Takes value from selected dropdown ID and assigns to variable -- Getting element content
    console.log(QAnswer);
    document.querySelector(QuestionClassAnswer).textContent = QAnswer; // Puts the Value into the div with the proper class.

   //QuestionResponse = "Q" + ActiveQuestionHolder +"Answer";

   //QAnswer = QuestionResponse;
   console.log("Q1Answer is = " + Q1Answer);
   //console.log("QuestionResponse is = " + QuestionResponse);

}
QChoiceFunction(1);

I am trying to create variables Q1Answer, Q2Answer, Q3Answer etc based on the parameter passed into the function. So far I am able to create the variable value with = document.querySelector(QuestionMenu).value; which is pulling data from a drop-down menu.

let "Q" + ActiveQuestionHolder + "Answer" = document.querySelector(QuestionMenu).value What does this mean ? You are attempting to assign a primitive value to a operation ? This doesn't mean anything syntaxically, and this is why you are having a syntax error. — Seblor
– Seblor, Commented Feb 13, 2020 at 15:59
Hi there! Can I ask why you need to add the parameter value in the variable name? From the code snippet above, it seems any other variable would just work fine. — Tunmise Ogunniyi
– Tunmise Ogunniyi, Commented Feb 13, 2020 at 16:02
Sure thing, I am working building a questionnaire. Instead of explicitly creating variables for each Question Answer I was hoping to have the function create them based on parameter that gets passed. I would like them to be formatted at Q1Answer, Q2Answer, etc. so they would be more readable down the road. — JustTry
– JustTry, Commented Feb 13, 2020 at 16:14

Ed Lucas · Accepted Answer · 2020-02-13 16:19:30Z

2

If you really need to create references on the fly, you could define an object to hold them all and then assign your dynamic names to it. For instance:

function QChoiceFunction(ActiveQuestionHolder) {
    QuestionMenu = "#Q" + ActiveQuestionHolder +"Choices";
    QuestionClassAnswer = ".Q"+ ActiveQuestionHolder +".Answer";

    let questions = {};
    questions["Q" + ActiveQuestionHolder + "Answer"] = document.querySelector(QuestionMenu).value; 

    // You can now reference your questions as: questions.Q1Answer or questions["Q1Answer"]
    ...

}

answered Feb 13, 2020 at 16:19

Ed Lucas

7,4644 gold badges41 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

M0nst3R · Accepted Answer · 2020-02-13 16:22:16Z

1

You cannot create local variables that way as const, let, and var all expect a valid variable name as a word immediately after them. This means that you cannot construct those names right there.

What you can do instead, is define an object inside your function, and instead of creating variables on the fly, you can create object properties on the fly.

The solution is as follows:

function QChoiceFunction(ActiveQuestionHolder) {
    // some code...

    // define your "dynamic variables" container object
    const values = {};

    // define the property name using template literals
    // or replace the value with: 'Q' + ActiveQuestionHolder + 'Answer'
    const propertyName = `Q${ActiveQuestionHolder}Answer`;

    // create and assign a new property to the object
    values[propertyName] = document.querySelector(QuestionMenu).value;

    // you can call, assign and log the new "variable" this way
    console.log("Q1Answer is = ", values[propertyName]);

    // some code...
}

Keep in mind that this allows you to create as many properties in the object as you want, and in the code above, if your ActiveQuestionHolder parameter contains the value 1, then values[propertyName] is exactly the same as values.Q1Answer.

answered Feb 13, 2020 at 16:22

M0nst3R

5,3131 gold badge28 silver badges39 bronze badges

2 Comments

JustTry Over a year ago

I am not familiar with objects just yet. Would these be accessible outside of the function scope?

M0nst3R Over a year ago

They would not, if you want to access them from outside the function, you need to define the values object outside the function, or if your function is part of a class, you can use the this keyword, or even (not recommended) define your object inside the function as window.values.

Collectives™ on Stack Overflow

Pass a parameter into a function and have that function generate a variable name that contains the passed parameter?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related