2

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.

simonthumper
  • 1,834
  • 2
  • 22
  • 44
  • Why would you ever want to do this? – mrtsherman Jan 19 '12 at 17:24
  • Tell us what problem you're really trying to solve and we can offer much better solutions than what you're asking to do. – jfriend00 Jan 19 '12 at 17:30
  • This is wrong - can you tell us what you are trying to do so we can advise you the correct way to do it? – Reinstate Monica Cellio Jan 19 '12 at 17:36
  • I know there are probably a lot of other problems with the code (which I will sort later) however could we just concentrate on what I'm asking please :) – simonthumper Jan 19 '12 at 17:40
  • what I am trying to sort is where I have left:left+boxNumber... I wan't the selected box to move back to it's original position without having to write the code out again and again for each possible selected box... – simonthumper Jan 19 '12 at 17:42
  • Anyone? Or am I looking at this from completely the wrong direction? :/ i'm fairly new to jQuery and coding in itself tbh... – simonthumper Jan 19 '12 at 17:58
  • @simonthumper: If you want us to focus on what you're asking, please help us out by including the smallest code sample you can, one that (a) is correct in everything else but the error, and (b) when run, will definitely reproduce the same error. See http://sscce.org/ for more information. – Platinum Azure Jan 19 '12 at 18:28
  • I apologise for the confusion, i have found the correct solution, it does produce the same error every time, and it is now almost sorted. Thank's for your time – simonthumper Jan 19 '12 at 18:35

4 Answers4

5

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.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
4

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

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • 1
    `eval()` should be the last possible resort. Chances are 99.999% that there's a much better way to accomplish the goal than using `eval()`. Of course the OP would have to describe what they're really trying to do for us to know which better method to recommend. – jfriend00 Jan 19 '12 at 17:28
  • @jfriend00 - I agree with you and yes it depends on the OP's scenario. – ShankarSangoli Jan 19 '12 at 17:30
  • I am trying to create a web layout system where there are boxes on the left and when you click them they are expanded to show an article... I also want it to work so when you click an unopened box the opened article closes back down to it's box, and the new one opens. Now I could do this by writing a line of code for every single box, however I want to make it more simple than this, so what i'm trying to do is to get the id of the box that is expanded. Strip this down until i have just the number of the box, then connect this value onto the end of the phrase left_ or top_ to return it to... – simonthumper Jan 19 '12 at 17:34
  • it's original position using the values left_1 and top_1 stored on the page load. – simonthumper Jan 19 '12 at 17:35
  • Would you like me to edit my original article to the full code so I can show you exactly what's going on? – simonthumper Jan 19 '12 at 17:36
  • That would be great if you do it. – ShankarSangoli Jan 19 '12 at 17:36
1
var position = 'top';
var pos = "posi";
var tion = "tion";
var finalVar = pos+tion;

alert(window[finalVar]); // better that `eval()`
document.write(window[finalVar]);
thecodeparadox
  • 86,271
  • 21
  • 138
  • 164
0

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

sree
  • 498
  • 4
  • 19