Keeping variables between function executions (Javascript)

Question

I have a JavaScript function that runs every time one of the many links is clicked. The functions first checks what the id of the link clicked is, then it runs an if stement. depending on the id of the link, different variables are defined.

All this works, but the problem is that some links define one variable while other links define another, I need to keep the variables defined in previous executions of the function defined for other executions of the function.

An example follows:

$(document).ready(function()
{
  $(".sidebar a").click(function(event) {
    event.preventDefault()
    var targetID = $(this).attr("data-target")
    $("#" + targetID).attr("src", $(this).attr("href"))
    var element = $(this).attr("class")
    if (element == "submit") {
      var submit = $(this).attr("user")
      alert("1")
    } else if (element == "view") {
      var view = $(this).attr("user")
      alert("2")
    }
  })
  window.history.replaceState({}, 'logs', '/file/path?submit=' + submit + '&' + 'view=' + view)
})

Thanks

Im sure my code is sloppy, but I know what I currently have works, all I need is to get the variables to go from inside to outside of the function — zggz12
– zggz12, Commented Feb 8, 2013 at 1:23
I'm not saying it shouldn't just that it looks confusing, either use semicolons or not, but mixing like that is confusing, same with the double and single quotes. Trying to solve problems with sloppy code is always a bad idea, because when it comes time to refactor it'll be a huge mess already. — elclanrs
– elclanrs, Commented Feb 8, 2013 at 1:24

bikeshedder · Accepted Answer · 2013-02-08 01:33:20Z

3

You can use an outer function which does nothing but declare some variables and return an inner function. The inner function can access the variables from the outer scope which stay the same for every call of the function.

Example

var next = (function() {
    var value = 0;
    function next() {
        return value++;
    }
}());

console.log(next());
console.log(next());
console.log(next());

Live demo

http://jsfiddle.net/bikeshedder/UZKtE/

answered Feb 8, 2013 at 1:33

bikeshedder

7,5471 gold badge28 silver badges30 bronze badges

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

Comments

Šime Vidas · Accepted Answer · 2013-02-08 01:23:39Z

1

Define the variables in an outer scope:

$(document).ready(function () {
    var submit;
    var view;

    $(".sidebar a").click(function (event) {
        event.preventDefault();
        var targetID = $(this).attr("data-target");
        $("#" + targetID).attr("src", $(this).attr("href"));
        var element = $(this).attr("class")
        if (element == 'submit') {
            submit = $(this).attr("user")
            alert("1")
        } else if (element == 'view') {
            view = $(this).attr("user")
            alert("2")
        }
    });
});

answered Feb 8, 2013 at 1:23

Šime Vidas

187k66 gold badges290 silver badges392 bronze badges

4 Comments

zggz12 Over a year ago

I have already tried that, it sounded like a good idea, but unfortunately it does the same thing as before.

Šime Vidas Over a year ago

@zggz12 What thing does it do?

zggz12 Over a year ago

It does the exact same thing as defining the variables inside the function. It always puts the variable that isn't being defined in that run of the function is set to undefined

Šime Vidas Over a year ago

@zggz12 You have to remove var from the assignments to submit, and view in the click handler. Did you do that? (See my code above)

mika · Accepted Answer · 2013-02-08 01:24:05Z

0

Create var submit and view outside of the function so it has a global scope.

answered Feb 8, 2013 at 1:24

mika

1,4611 gold badge12 silver badges23 bronze badges

4 Comments

Šime Vidas Over a year ago

Bad advice. The use of global variables should be minimized.

Tom Roberts Oct 9 at 3:45

No, it is good advice, as it is the simplest and most obvious approach. Creating a new scope just to avoid global variables merely obfuscates it. But be sure the variable names are clear and unique. In a large, multi-package project, such names should begin with the package name.

mika Over a year ago

haha! well my point is that in order to keep these variables available they need to be outside the method scope...

Šime Vidas Over a year ago

Outside the click handler scope, yes. But there is of course not need to make them global, as one can declare them in the scope of the ready handler, or even introduce an additional scope.

Plynx · Accepted Answer · 2013-02-08 01:30:36Z

0

You can store arbitrary data on a matched element with JQuery's .data() function.

Example:

$(this).data("submit", $(this).attr("user")); // set a value

var submit = $(this).data("submit"); // retrieve a value

This places the data in the context of JQuery's knowledge of the element, so it can be shared between function calls and even between different events.

answered Feb 8, 2013 at 1:30

Plynx

11.5k3 gold badges34 silver badges34 bronze badges

1 Comment

zggz12 Over a year ago

Is there anything that I would need to do to initializing this?...I tried to put the "$(this).data("submit", $(this).attr("user"))" inside the if statement, and the "var submit = $(this).data("submit")" before the part that works with the variables, it didn't work.

Collectives™ on Stack Overflow

Keeping variables between function executions (Javascript)

4 Answers 4

Example

Live demo

Comments

4 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Example

Live demo

Comments

4 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related