ava_barbilla Posted January 26, 2015 Share Posted January 26, 2015 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? I have done some research and got some clues like using .onchange or localStorage under the script. Link to comment Share on other sites More sharing options...
Ingolme Posted January 26, 2015 Share Posted January 26, 2015 Do you know how to assign event handlers and do you know how to store values using localStorage? How much Javascript do you know? 1 Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 26, 2015 Author Share Posted January 26, 2015 To be honest, I have no idea on how to assign event handlers, however, I do have some knowledge about localStorage. I have been trying out some code since some days and it looks 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> This code does not work. I am finishing highschool and do javascript as part-time learning as it is simply lots of fun. I have been using javascript no for 6 months and know my way around but am not an expert. What do you propose to confront this problem? Best regards!! Link to comment Share on other sites More sharing options...
justsomeguy Posted January 26, 2015 Share Posted January 26, 2015 It won't work just to set properties on the localStorage object, it has methods to get and set values. There are some examples here:https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API 1 Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 26, 2015 Author Share Posted January 26, 2015 The problem with localStorage and sessionStorage out of my understandgin is that data is permanentyl stored, so once I refresh the page the script using local storage will always put in the recent value. What I want to do is once the page is refreshed, insert the new random number under #price and old random number (which was the random number that appeared before I refreshed the page) under #previous. This cycle continues on for every page refresh. Something similar to excel VBA: http://stackoverflow.com/questions/4668410/how-do-i-get-the-old-value-of-a-changed-cell-in-excel-vba This is just like when you watch the news and the stock prices appear with a section called previous. Under previous appears the price of the stock before it either increased or decreased. Those firms also use some type of scripts to record the prices and show under the previous section the value of the stock one record before. I want to apply this using a random number. Would you be able to provide any demo? I would really appreacite it!! Many thanks!!!! Link to comment Share on other sites More sharing options...
Ingolme Posted January 27, 2015 Share Posted January 27, 2015 There are examples right on the localStorage page at MDN: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API In your case, what you have to do is first show the value of the stored data and then change it after. // First show the stored valuedocument.getElementById("previous").innerHTML = localStorage.getItem("previous");// Then change itvar price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;localStorage.setItem("previous", price); 1 Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 27, 2015 Author Share Posted January 27, 2015 Wow!! Thank you very much for your support. With my folded view I could not see the solution altough it makes sense to me now, but hey, everyday you learn something more and all thanks to you guys. Best regards!!!!! Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 27, 2015 Author Share Posted January 27, 2015 There is a last issue I have come up with. I think this is were .onchange() comes into play. The above script works perfectly fine, always refreshing the random number, showing the old random number and so forth. What function could I use when the value under price is not a random number. For instance, take the stock market. The value under price changes so this number is stored and when I refresh the page again this vale appears under previous, PERFECT! Now, what if the value under price does not change? The script regarding localStorage is still executed on page refresh and will always store the value that appears under price. This means, that is the number has not changed it will sotre the unchanged value and then eventually both #price and #previous will be the same. Here is what I mean: One case scenario: Page refresh #price = 1.3 #previous = 1.56 Page refresh #price = 1.45 #previous = 1.3 Page refresh #price = 1.14 #previous = 1.45 PERFECT UP TO HERE! Second case scenario: Page refresh #price = 1.26 #previous = 1.14 Page refresh #price = 1.9 #previous = 1.26 Page refresh #price = 1.9 <======= The price here remains unchanged #previous = 1.9 What I want to do is for this last page refresh, is that if the number remains unchanged, to not run the localStorage.setItem. The last page refresh would look like this: Page refresh #price = 1.9 #previous = 1.26 Many thanks again for the support!! Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 27, 2015 Author Share Posted January 27, 2015 Assuming that the random number will not change for 5 page refreshes or for x amount of time, something like this?? <p id="price" onchange="myFunction()"></p><p id="previous"></p><script>document.getElementById("previous").innerHTML = localStorage.getItem("previous");var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;function myFunction() {localStorage.setItem("previous", price);}</script> Link to comment Share on other sites More sharing options...
justsomeguy Posted January 27, 2015 Share Posted January 27, 2015 You just need to add an if statement. Once you get both numbers, compare them and if they're the same then don't save the new one. Link to comment Share on other sites More sharing options...
Ingolme Posted January 27, 2015 Share Posted January 27, 2015 You'll need yet another localstorage variable to remember which value it had two iterations before. Then when you generate the current price you need to compare it to the previous one to decide which value to show. Onchange does not work like that. The onchange event fires when a user changes the value of a form element. Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 27, 2015 Author Share Posted January 27, 2015 Ok. Makes sense to me, I will add an if statement to compare the variables, and use the value required depending whether the the comparison is equal or not equal. Thank youuu!! Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 27, 2015 Author Share Posted January 27, 2015 Sorry , this localStorage gets me so confused. How can I add a second localStorage to refer back when both values are equal? Once I add one my script adds the same value to both localStorages. Would you be able to provide a demo like last please? Best regards!! Link to comment Share on other sites More sharing options...
justsomeguy Posted January 28, 2015 Share Posted January 28, 2015 LocalStorage isn't all that different than just regular variables, instead of using variable names you getItem and setItem. Otherwise, it's just a collection of named values like other variables. If you can do the algorithm with regular variables (which wouldn't survive a page refresh), you should be able to do the same with localStorage. If you post your code we can point out where you're going wrong. 1 Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 28, 2015 Author Share Posted January 28, 2015 This is my code: <p id="price"></p><p id="previous"></p><script>document.getElementById("previous").innerHTML = localStorage.getItem("previous");localStorage.setItem("beforeprevious", localStorage.getItem("previous");if( document.getElementById("price").innerHTML == document.getElementById("previous").innerHTML) {document.getElementById("previous").innerHTML = localStorage.getItem("beforeprevious");}var price = Number(6);document.getElementById("price").innerHTML = price;localStorage.setItem("previous", price);</script> I do not know why nothing appears Thank you again for your support Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 28, 2015 Author Share Posted January 28, 2015 Sorry I forgot to say, I put in Number(6) for testing purposes as when a random number appears it works fine. Putting in a number by myself is for testing purpose to check if it really choose the second localStorage when the #price and #previous are equal. Link to comment Share on other sites More sharing options...
ava_barbilla Posted January 28, 2015 Author Share Posted January 28, 2015 Ok, I finally found the solution and followed your advices. This is my code: <p id="price"></p><p id="prev"></p><script>document.getElementById("prev").innerHTML = localStorage.getItem("prev");var price = Math.round((Math.random() + 1)*100)/100;document.getElementById("price").innerHTML = price;var prev = document.getElementById("prev").innerHTMLif (price == prev) {document.getElementById("prev").innerHTML = localStorage.getItem("beforeprev")}// Save previous to the one before & Save price to the previous valueif (price != prev) {localStorage.setItem("beforeprev", prev);localStorage.setItem("prev", price);}</script> What effect will this have? I mean, if I insert this script into my website for instance, as a server side code will everyone who visits my site be able to view the current price and the previous as my server has already stored the data? or does this depend on the clients browser and for everyone who visits my site the process wil start over again? Will the data be permanently stored? My enormous gratitude to you guys your tips really helped me!! Link to comment Share on other sites More sharing options...
Ingolme Posted January 28, 2015 Share Posted January 28, 2015 This is Javascript. It only runs on the client. All the values it gets and uses are on the user's computer. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now