Using Javascript to set a variable in one function and then call it in an second function

Question

I have to create a page where you can use a graphic interface to select options and then display a finished product.

To simplify just know that there are three variables - top, bottom, color.

Each variable has 3 types. TopStyle1, TopStyle2, TopStyle3 ... BottomStyle1, BottomStyle2, BottomStyle3 ... Color1, Color2, Color3.

So I have an image for each style, so when you select (onClick) TopStyle1. I the image representing TopStyle1 changes to an "On" State (just a different image with a gold circle around it indicating your selection) and TopStyle2 and TopStyle3 change to an "Unselected" state (images change to grayed out versions of themselves). If you click on TopStyle1 again all there Styles change to an "Off" state (their original images).

I found code to do all this, may not be the most efficient way but it works

function topstyle1() {

    if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style1";
    }
    else if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style1";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

function topstyle2() {

    if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style2";
    }
    else if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
        var top="style2";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

function topstyle3() {

    if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-OFF.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
        var top="style3";
    }
    else if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-DIS.jpg") 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
        var top="style3";
    }
    else 
    {
        document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
        document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
        document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
        var top="";
    }
}

At the end of each function, after the images are change I'm trying to set a variable based on which function is called.

So if you click on TopStyle1 you var top="style1" ... if you change it to TopStyle2 var top="style2" and so on.

After you've chosen your Top, Bottom, and Color there is a button that will say "View Completed Item." When you click on this button I want to call a new function that will display an image based on your choices. For now I'd be happy just displaying the text from the variables but I don't know how to get them to show up.

I've tried this:

function changeImage() {
    document.getElementById("display").innerHTML=top;
    }

But I think the contents of the variable are gone when I get to this point.

There has to be a way to set the variable based on my selections and then call them in another function, but my with my inexperience I'm having a hard time finding the answer.

You have an opportunity there for some serious code reduction. Whenever you see repeating code that is almost completely identical, you can usually abstract it away into a function that receives an argument to set the differing part(s). — cookie monster, Mar 20 '14 at 19:55
Thanks for the input. I think I see/understand what your getting at. I'll look into that later, for now I'm just trying to get the whole concept to work. (baby-steps) — Ed W., Mar 20 '14 at 20:08
Sounds good. Thought I'd just throw it out there. :-) Give this a shot when you feel like it: http://jsfiddle.net/TABEb/1/ I think it correctly captures your logic. You'll just call it like `topstyle(1)`, `topstyle(2)`, etc. — cookie monster, Mar 20 '14 at 20:14

score 0 · Accepted Answer · answered Mar 20 '14 at 19:51

Take your top variable outside of your function scope

var top = "";
function topstyle1() {

if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style1";
}
else if (document.getElementById("style1-top").src == "<%= bse%>images/style1-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-ON.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style1";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

function topstyle2() {

if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style2";
}
else if (document.getElementById("style2-top").src == "<%= bse%>images/style2-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-ON.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-DIS.jpg";
    top="style2";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

function topstyle3() {

if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-OFF.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
    top="style3";
}
else if (document.getElementById("style3-top").src == "<%= bse%>images/style3-top-DIS.jpg") 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-DIS.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-DIS.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-ON.jpg";
    top="style3";
}
else 
{
    document.getElementById("style1-top").src = "<%= bse%>images/style1-top-OFF.jpg";
    document.getElementById("style2-top").src = "<%= bse%>images/style2-top-OFF.jpg";
    document.getElementById("style3-top").src = "<%= bse%>images/style3-top-OFF.jpg";
    top="";
}

}

score 0 · Answer 2 · answered Mar 20 '14 at 19:51

0

You need to declare your "top" variable outside of your function to accomplish this.

var x = 0;
function increase_x() {
    x++;
}
function decrease_x() {
    x--;
}

http://jsfiddle.net/6LhtX/

answered Mar 20 '14 at 19:51

neonKow

29
4

score 0 · Answer 3 · edited May 23 '17 at 12:11

0

You need to use the proper scope of the variable. Take the following for example:

var top;

function set_top(){
    top = 'Hello World';
}

function log_top(){
    console.log( top );
}

set_top();
log_top();

The console would log 'Hello World', because the variable top is a global variable. It is accessible throughout all of the functions and can be used/overwritten at any time. Currently the way that you have it, the variable top is only accessible inside of each function (making it a local variable, or local scope).

For more on this I would recommend checking out: What is the scope of variables in JavaScript?

edited May 23 '17 at 12:11

Community

1
1

answered Mar 20 '14 at 19:52

Samuel Cook

16,620
7
50
62

I will also try this method, thanks for the info and the link. Is there any reason this is a better method than the one QBM5 suggests? – Ed W. Mar 20 '14 at 20:04
It's exactly the same. They have set `top` as a global variable so that it is accessible throughout all of your functions. – Samuel Cook Mar 20 '14 at 20:05

Using Javascript to set a variable in one function and then call it in an second function

3 Answers3