Javascript .onchange?

Question

I am currently trying to find out a way to automatically store the previous price of an item before it gets updated. For instance, if on my website I show the currency exchanges let it be USD to EURO and I only get the real time exhange price, how can I use javascript to display the previous value in one line and display the updated value in another line. This is an example code, assuming that the random number is the exchange price between the currencies.

Markup:

<p id="price"></p>
<p id="previous"></p>

JavaScript:

<script>
var price = Math.round((Math.random() + 1)*100)/100;
document.getElementById("price").innerHTML = price;
</script>

In this case scenario, a random number appears and it is for example 1.11. Afterwards, I refresh the page, the script runs again and the random number changes to 1.43. I want to display the new random number which is 1.43 under #price and the old (or previous) random number which in this case was 1.11 under #previous. How can I use JavaScript to do so?

Up to now thanks to @Terry I have come to something like this:

<p id="price"></p>
<p id="previous"></p>

<script>
var price = Math.round((Math.random() + 1)*100)/100;
document.getElementById("price").innerHTML = price;
localStorage.previous = price;
document.getElementById("previous").innerHTML = localStorage.previous;
</script>

Is there a way to use localStorage to save the previous price (or old random number) once the page refreshes?

You want to display the old random number from before you refreshed the page? You'll have to store it in some way, perhaps a cookie or using localStorage if that's an option. — Evan Knowles, Jan 26 '15 at 08:05
Yes exactly I want to store the old random number... How can I apply cookies? For cookies you set an expiration time which means that the data is stored for a specific time, but I want to display the old number every time I refresh the page which means that if the initial value was 1.11, I refresh and another value appears which is 1.43 then under #price appears 1.43 and under #previous 1.11, I refresh again and the random number is 1.87 then under #price appears 1.87 and under previous 1.43 and so on every time the site refreshes... Sorry for bombarding you with so much information at a time. — Ava Barbilla, Jan 26 '15 at 08:41
You can use the code at http://stackoverflow.com/questions/4825683/how-do-i-create-and-read-a-value-from-cookie — Evan Knowles, Jan 26 '15 at 08:48
They show an expiration date, and if I set no expiration date then the cookies are deleted when the browser closes by default. Is there a way to automatically update cookies after the page is refreshed? — Ava Barbilla, Jan 26 '15 at 09:22

score 1 · Answer 1 · answered Jan 26 '15 at 08:10

1

Doing refresh to the whole page will run the whole script again so there is 2 possible solutions

Using ajax request to load the new price and there are a lot of libraries that can help you with that such as JQuery
If you have to refresh the page and you have server side code, Then save the old value in a hidden field and update your server side and client side logic to consider having value inside the hidden field.

answered Jan 26 '15 at 08:10

Hossam Barakat

1,399
9
19

I use JavaScript which is both server side and client side... What do you mean with save? – Ava Barbilla Jan 26 '15 at 08:35
by save I mean having hidden field and set the value of that field to the value of the old price – Hossam Barakat Jan 26 '15 at 08:49
Ok I understand, one more thing would the css be visibility: hidden or display:none? – Ava Barbilla Jan 26 '15 at 08:59
for the hidden field no need for CSS, it should be something like – Hossam Barakat Jan 26 '15 at 09:05
Or the HTML DOM Style visibility Property? – Ava Barbilla Jan 26 '15 at 09:08
Once I hide it, the old value does not show and what I am trying to do is to basically "store" or "save" the random number before it changes and once it changes display the new random number under #price and the saved random number which is the value that appeared before the site has been refreshed under #previous – Ava Barbilla Jan 26 '15 at 09:16

score 0 · Accepted Answer · answered Jan 27 '15 at 08:35

This is the script:

<script>
document.getElementById("previous").innerHTML = localStorage.getItem("previous");
var price = Math.round((Math.random() + 1)*100)/100;
document.getElementById("price").innerHTML = price;
localStorage.setItem("previous", price);
</script>

Javascript .onchange?

2 Answers2