CODEWITHSUNDEEP
javascripthtml
Brandon
Brandon

Reputation: 319

How can I make a variable retain old information?

So for example, let's say I define a variable as being equivalent to some text typed into a textarea then I change the text in the textarea to a new value. I want to be able to keep the old value stored in the variable originally and compare it with the new value stored. I thought maybe I could do this with two variables. What I want to do with the code is find out whether or not the value I entered originally is the same as the new value I enter or not. Here's an attempt. I don't expect the code below to work at all. It's only meant to give an idea of what I want to do. 

<textarea id="mytext"></textarea>
<input onclick="MyFunction();" type="submit" value="submit"/> 

function MyFunction(){
    var MyVariable = document.getElementById("mytext").value();
    var MyVariable2 = document.getElementById("mytext").value();
    if(MyVariable === MyVariable2){
        alert('the text is the same');
    }
    else
    {
        alert('the text is different');
    }
}

http://jsfiddle.net/2eFD2/4/

Upvotes: 1

Views: 1414

Answers (6)

Kunj
Kunj

Reputation: 2018

You can use HTML5 data attribute or localStorage to hold the value.

Data attribute:

var myText = document.getElementById("myText");
myText.setAttribute("data-old", myText.value); //Set
myText.getAttribute("data-old");               //Get

LocalStorage:

localStorage.setItem("myText", document.getElementById("myText").value); //Set
localStorage.getItem("myText");                                          //Get

Upvotes: 0

Hardik Sondagar
Hardik Sondagar

Reputation: 4495

I've done something similar, I'm using that Old Value to check whether form get updated or not and on submit I'm removing unchanged input

HTML:

<form id="myform">
    <input type="text" id="Name" data-initial="Foo" value="Foo" />
    <input type="text" id="Location" data-initial="Bar" value="Bar" />
    <input type="submit" value="Submit" />
</form>

JS:

$("#myform").submit( function() {
$(this).find("input").filter( function() {
    $this = $(this);
    return $this.data("initial") == $this.val();
}).remove();
});

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816462

How can I make a variable retain old information?

By not assigning new information to it.

Simply create a variable outside of the function, so that it persists between function calls, and only assign to it if it doesn't have a value yet:

var previousValue = null;

function MyFunction(){
    var currentValue = document.getElementById("mytext").value;

    if (previousValue === currentValue){
        alert('the text is the same');
    }
    else
    {
        alert('the text is different');
    }

    if (previousValue == null) {
        // only executed the first time the function is called
        previousValue = currentValue; 
    }
}

I need the variable with the old information to lag behind the second variable with information the second variable had before being given new info.

Then you just always assign the new value to the variable:

var previousValue = null;

function MyFunction(){

    var currentValue = document.getElementById("mytext").value;

    if(previousValue === currentValue){
        alert('the text is the same');
    }
    else
    {
        alert('the text is different');
    }

    previousValue = currentValue;
}

Upvotes: 2

Priya jain
Priya jain

Reputation: 703

you just need to assign your old variable data to new variable here is the fiddle:

Try This Code: var MyVariable2 = null;

function MyFunction(){
    var MyVariable = $("#mytext").val();

    if (MyVariable2 == null) {
        MyVariable2 = MyVariable; 
    }

    if(MyVariable === MyVariable2){
        alert('the text is the same');
    }
    else
    {
        alert('the text is different');
    }
}

here is the fiddle : http://jsfiddle.net/2eFD2/6/

Upvotes: 0

Nevan Tan
Nevan Tan

Reputation: 21

You could use make use of the HTML5 data attribute:

var textArea = document.getElementById("myText");
textArea.setAttribute("data-old", textArea.value());

And retrieve it with:

document.getElementById.getAttribute("data-old");

Upvotes: 1

rfernandes
rfernandes

Reputation: 1161

Here are two ways that spring to mind:

  1. If you have JQuery, you can use data storage to store the old value by attaching it to the textbox for example;
  2. If you want to do it in an even simpler way, you could also have a hidden text box for each text box you want to track. Every time the main text box value changes, you can "save" the old value in the hidden text box.

Whatever you do, just avoid storing the old values in global variables as that will pollute your global namespace and that is never a good thing.

Upvotes: 0

Related Questions