combining two variables to set a new variable to an already declared variable using javascript

Question

I am trying to set a new variable to the same value as an already declared variable by combining two variables that together make the name of the original variable... This may sound confusing, so here's an example:

// JavaScript Document


document.write (finalVar);

$(document).ready(function()
{ 
 var position_1 = $("#box_1").position();
 var left_1 = position_1.left;
 var top_1 = position_1.top;
 var position_2 = $("#box_2").position();
 var left_2 = position_2.left;
 var top_2 = position_2.top;
 var box;
 var boxLength;
 var boxNumber;
 var selected = 0;


 $("#box_1").click
    (function()
        {
            if (selected == 1) // if a box is selected run the following
                {       
                    box = $(".selected").attr("id");
                    boxLength = box.length;
                    boxNumber = box.charAt(boxLength-1); // finds the number of the box
                    alert(+boxNumber);
                if (box == "box_1") // if the selected box is itself     then mimimise the box, remove the selected class from it and set selected to zero
                    {
                        $("#box_1").animate({height:50,opacity:0.8,left:left_1,top:top_1,borderRadius:4,MozborderRadiu  s:4},(60),"swing").animate({width:50},(60),"swing").animate({opacity:0.6},(150),        function()
                        {
                                $(this).removeClass("selected");
                        }); 
                    selected = 0;
                    }
                else
                    {
                        $(".selected").animate({height:50,opacity:0.8,left:left_+boxNumber,top:top_+boxNumber,borderRadius:4,MozborderRadius:4},(60),"swing").animate({width:50},(60),"swing").animate({opacity:0.6},(150),     function()
                        {
                            $(".selected").removeClass("selected");
                            $("#box_1").animate({width:900,left:60,top:0,borderRadius:10,MozborderRadius:10},(60),"swing").animate({height:500},(60),"swing").animate({opacity:1},(150), function()
                                {
                                    $("#box_1").addClass("selected");
                                });
                        }
                );} } // end of function for if a box is selected
            else // if no box is selected run the following
                {
                    $("#box_1").animate({width:900,left:60,top:0,borderRadius:10,MozborderRadius:10},(60),"swing").animate({height:500},(60),"swing").animate({opacity:1},(150), function()
                        {   
                            $("#box_1").addClass("selected");


                        }); 
                    selected = 1;
                }
        });

    $("#box_2").click
    (function()
        {
            if (selected == 1) // if a box is selected run the following
                {       
                    box = $(".selected").attr("id");
                    boxLength = box.length;
                    boxNumber = box.charAt(boxLength-1); // finds the number of the box
                    alert(+boxNumber);
                if (box == "box_2") // if the selected box is itself then mimimise the box, remove the selected class from it and set selected to zero
                    {
                        $("#box_2").animate({height:50,opacity:0.8,left:left_2,top:top_2,borderRadius:4,MozborderRadius:4},(60),"swing").animate({width:50},(60),"swing").animate({opacity:0.6},(150),  function()
                        {
                                $(this).removeClass("selected");
                            selected = 0;   
                        }); 
                    }
                else
                    {
                    $(".selected").animate({height:50,opacity:0.8,left:left_+boxNumber,top:top_+boxNumber,borderRadius:4,MozborderRadius:4},(60),"swing").animate({width:50},(60),"swing").animate({opacity:0.6},(150),     function()
                        {
                            $(".selected").removeClass("selected");
                            $("#box_2").animate({width:900,left:60,top:0,borderRadius:10,MozborderRadius:10},(60),"swing").animate({height:500},(60),"swing").animate({opacity:1},(150), function()
                                {
                                    $("#box_2").addClass("selected");
                                });
                        }
                );} } // end of function for if a box is selected
            else // if no box is selected run the following
                {
                    $("#box_2").animate({width:900,left:60,top:0,borderRadius:10,MozborderRadius:10},(60),"swing").animate({height:500},(60),"swing").animate({opacity:1},(150), function()
                        {   
                            $("#box_2").addClass("selected");
                            selected = 1;
                        }); 
                }
        });

});

I would then want 5 to be written to the document... is there any way of doing this? I know this is probably not the correct way to even begin thinking about doing this, i was just using it as a synonym for what i was trying to do.

Thanks for your help.

Answer 1

If these are global variables, you can do it like this:

var position = 4;
var a = "posi";
var b = "tion";

document.write(window[a+b]);

This works only because all global variables are actually properties of the window object and you can reference properties of the window object either as window.position or window["position"]. Since the latter works, you can also construct the string "position" using string operations as in the example above.

I would ask why you're doing this? One common reason people ask to do this is so they can access variables like position1, position2, etc.... If that's the case, then the better answer is to use an array which can be accessed by index:

var positions = [1,4,67,99];

document.write(positions[3]);

You can access array values via a variable too like this:

var positions = [1,4,67,99];
var pos = 3;

document.write(positions[pos]);

Or, to iterate over the entire array:

var positions = [1,4,67,99];

for (var i = 0; i < positions.length; i++) {
    document.write(positions[i]);
}

If you describe the real problem you're trying to solve, we can recommend the best way to solve it. What you're currently asking about sounds like the wrong approach to pretty much any problem.

Answer 2

I don't know why you are doing this but yes it is possible using eval method.

Try this

var position = 5;
var pos = "posi";
var tion = "tion";
var finalVar = pos+tion;

document.write (eval(finalVar));

DEMO

Answer 3

var position = 'top';
var pos = "posi";
var tion = "tion";
var finalVar = pos+tion;

alert(window[finalVar]); // better that `eval()`
document.write(window[finalVar]);

Answer 4

use this while combining your variables parseInt(pos)+parseInt(ition) dont forget to declare string variables pos and ition... :)