CODEWITHSUNDEEP
javascriptjquery
sams5817
sams5817

Reputation: 1037

Remembering the last value passed to a JavaScript function called on click

Below is my code fragment:

<div onclick = "myClick('value 1')">
    button 1
</div>
 <div onclick = "myClick('value 2')">
    button 2
</div>

Basically when I for each click on a different div, a different value will be passed to the JavaScript function.

My Question is how can I keep track of the value passed in the previous click?

For example, I click "button 1", and "value 1" will be passed to the function. Later, I click on "button 2", I want to be able to know whether I have clicked "button 1" before and get "value 1".

Upvotes: 2

Views: 4536

Answers (6)

Gaurav
Gaurav

Reputation: 859

we can leverage javascript static variables One interesting aspect of the nature of functions as objects is that you can create static variables. A static variable is a variable in a function‘s local scope whose value persists across function invocations. Creating a static variable in JavaScript is achieved by adding an instance property to the function in question. For example, consider the code here that defines a function doSum that adds two numbers and keeps a running sum:

function doSum(x,y){
  if (typeof doSum.static==='undefined'){
     doSum.static = x+y;

 }else{
    doSum.static += x+y;
}
 if (doSum.static >= 100){doSum.static = 0;doSum.static += x+y;}

  return doSum.static;
}
alert(doSum(5,15))
alert(doSum(10,10))
alert(doSum(10,30))
alert(doSum(20,30))

Upvotes: 0

Cory Gross
Cory Gross

Reputation: 37206

I am surprised that no one else mentioned this, but since functions are first class objects in JavaScript, you can also assign attributes and methods to functions. So in order to remember a value between function calls you can do something like I have with this function here:

function toggleHelpDialog() {
    if (typeof toggleHelpDialog.status === 'undefined')
        toggleHelpDialog.status = true;
    else
        toggleHelpDialog.status = !toggleHelpDialog.status;

    var layer = this.getLayer();

    if (toggleHelpDialog.status) layer.add(helpDialog);
    else helpDialog.remove();

    layer.draw();
}

Here I have added an attribute named 'status' to the toggleHelpDialog function. This value is associated with the function itself and has the same scope as the toggleHelpDialog function. Values stored in the status attribute will persist over multiple calls to the function. Careful though, as it can be accessed by other code and inadvertently changed.

Upvotes: 0

Vytautas Butkus
Vytautas Butkus

Reputation: 5535

You can define somekind of variable, like var lastUsed; add additional line to your function:

var lastUsed = null;
function myClick(value){
  prevClicked = lastUsed; //get the last saved value
  ...
  lastUsed = value; //update the saved value to the new value
  ...
}

And here you go

Upvotes: 3

Shalom Craimer
Shalom Craimer

Reputation: 21449

You need a variable. Variables are like little boxes in which you can store values. In this case, we can store the value that was last passed to the function myClick.

In Javascript, you can define a variable like this:

var lastClickedValue;

You can "put" a value into that variable. Let's say you want to put your name in there. You would do this:

lastClickedValue = 'sams5817';

Now here's the tricky bit. Variables have "scope". You might want to think about it as their "life-time". When a variable reaches the end of its scope, you cannot read or write to it anymore. It's as if it's never been. Functions define a scope. So any variable you define in a function will disappear at the end of the function. For example:

function myClick(value)
{
   var lastClickedValue;

   alert('lastClickedValue is = ' + value);

   lastClickedValue = value;
}

That looks almost right, doesn't it? We declared a variable, display its last value, and update it with the new value.

However, since the lastClickedValue was declared in the function myClick, once we've reached the end of that function, it's gone. So the next time we call myClick, lastClickedValue will be create all over again. It will be empty. We call that an "uninitialized" variable.

So what's the problem? We're trying to remember a value even after the end of myClick. But we declared lastClickedValue inside myClick, so it stops existing at the end of myClick.

The solution is to make sure that lastClickedValue continues to exist after myClick is done.

So we must delcare lastClickedValue in a different scope. Luckily, there's a larger scope called the "global scope". It exists from the moment your page loads, and until the user moves on to another webpage. So let's do it this way:

var lastClickedValue;

function myClick(value)
{
   alert('lastClickedValue is = ' + value);

   lastClickedValue = value;
}

It's a very small difference. We moved the declaration of the variable lastClickedValue to be outside the function myClick. Since it's outside, it will keep existing after myClick is done. Which means that each time we call myClick, then lastClickedValue will still be there.

This will let you know what the last value passed to myClick was.

Finally, I'd like to advise you to look for some kind of Javascript tutorials. I wish I knew of some good ones to recommend, but I'm certain you can find a few on the Internet. If you try to write programs before understanding what you're doing, you'll find yourself producing work that is less than what you're capable of. Good luck!

Upvotes: 3

narek.gevorgyan
narek.gevorgyan

Reputation: 4185

I suppose you need something like this

var clickedButtons = [];
function myClick(value){
...
clickedButtons.push(value);
...
}

Upvotes: 0

DoctorLouie
DoctorLouie

Reputation: 2674

Just add it to a variable in your script:

var lastClicked;
var myClick = function(value) {

    lastClicked = value;

};

Upvotes: 4

Related Questions