Currency Conversion with Javascript Iteration

Missing that handy currency/country conversion link on your favorite page? A quick bookmarklet can fix that.

We will put together some javascript to iterate over our currency elements to do the conversion for us. In this case, we are looking at the bicycle site road.cc and we wish to convert review prices from Pounds to US Dollars.

Screenshot 2013-12-29 22.55.21
road.cc reviews before conversion (http://road.cc/show/review-section/road-bikes/35)
Screenshot 2013-12-29 22.55.31
road.cc reviews after conversion (http://road.cc/show/review-section/road-bikes/35)

 

 

 

 

 

 

 

 

 

We first select all of our data of interest. In this case, our data is in a div with a specific class that merely contains the price.

var data = document.getElementsByClassName("review-price");

Next we will iterate over this data and convert the price using a decent approximation based upon today’s conversion rate. However, we have two considerations; the price div also contains the Pound character which we will first cut out before converting with the replace call and we will also want to round to two decimal places for sanity.

for (var i = 0; i < data.length; i++) {
   data[i].innerHTML = Math.round(data[i].innerText.replace('£', '') * 1.6479 * 100) / 100;
}

If you try and run this, you may notice one caveat – road.cc uses infinite scroll. This means that we will convert material that is currently loaded, however, upon scrolling down and with the loading of additional content, we would have to run the bookmarklet again to convert this newly loaded data. The problem is that we would convert our previously adjusted price data again. To prevent this issue, we can modify our code to convert data that begins with the Pound but not Dollar symbol.

function () {
    var data = document.getElementsByClassName("review-price");
    for (var i = 0; i < data.length; i++) {
        /* change class so we don't suck it up again since we have to re-run the bookmarklet
       again because of infinite scroll
      */
        if (data[i].innerHTML.indexOf("£") != -1) {
            data[i].innerHTML = '$' + Math.round(data[i].innerText.replace('£', '') * 1.6479 * 100) / 100;
        }
    }
}

Now, remember, we wrap this in a javascript declaration to create our bookmarklet. Thus, the final version will result in the following when we place our pieces of code together.

javascript: (

function () {
    var data = document.getElementsByClassName("review-price");
    for (var i = 0; i < data.length; i++) {
        /* change class so we don't suck it up again since we have to re-run the bookmarklet
       again because of infinite scroll
      */
        if (data[i].innerHTML.indexOf("£") != -1) {
            data[i].innerHTML = '$' + Math.round(data[i].innerText.replace('£', '') * 1.6479 * 100) / 100;
        }
    }
}())

Running the bookmarklet should now convert currency data to US Dollars which works with infinite scroll by re-clicking the bookmarklet as new data is loaded.