Change all prices on the page from one currency to another with jquery?

Question

I don't need to use Yahoo Finance api or such. Simply multiply the numbers by a fixed amount.

See codepen. Dropdown functionality is not implemented, I want to have the exchange down first. I know this is just the start, but how to go on? This obviously needs several problems to be solved:

This currently changes every value to the same
I need the ability to change them back when selecting the USD again
Is it too inefficient to not give classnames, but find all the prices (contains $ or €) automatically?

Could you give me some pointers how should I go on, please?

$(document).ready(function() {
//  $('select').material_select();
  $('.caret').text(" ");
  //here starts my attempt for the exchange
  var price = $(".price").text().replace("$", "");
  var convertedToNumber = parseFloat(price);
  var eurPrice = convertedToNumber / 1.18;
  $(".price").text(eurPrice);


});

input.select-dropdown {
  color: #26a69a;
}
.caret {
  background:url("http://svgshare.com/i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">

  <div class="input-field col s1">
    <select>
          <option value="1" selected>USD</option>
          <option value="2">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<ul class="currencies">
  <li class="price">$1500</li>
  <li class="price">$2000</li>
  <li class="price">$342</li>
</ul>

For the dollar sign you can use CSS classes. See here: https://stackoverflow.com/questions/29997297/how-to-add-a-dollar-sign-through-css-content — Igal S., Sep 27 '17 at 16:54
You really should take a look at "data binding" in web applications. It will make this flow easier. There are lot of libraries that can help you. — Christian Benseler, Sep 27 '17 at 17:05

php_nub_qq · Answer 1 · 2017-09-28T05:41:37.250

What you are looking for is called data binding and there are a lot of libraries and stuff that will provide it for you.

I will assume you have no idea what I'm talking about and I'll just explain to you what the basic idea is.

You have a set of data, in your case prices.

var prices = [
  1500,
  2000,
  342
];

Then you have your object of currency rates

var rates = {
  USD: 1, // obviously
  EUR: 0.86
}

Now every time the currency is changed you recalculate the price and update every occurrence.

function updatePrices(rate) {
  var elements = document.getElementsByClassName("price");

  prices.forEach((price, index) => {
    elements[index].innerHTML = price * rate
  });
}

document.getElementById("selector").onchange = function() {
  updatePrices(rates[this.value]);
}

And call it initially as well.

updatePrices(rates.USD);

Now obviously this is a very dumb way to bind your data, using array indexes and class names, but that's the basic idea behind it.

As to the currency signs, it is generally a bad idea to include them as very few currencies actually have them but the idea is the same.

var prices = [
  1500,
  2000,
  342
];


var rates = {
  USD: 1, // obviously
  EUR: 0.86
}

function updatePrices(rate) {
  var elements = document.getElementsByClassName("price");

  prices.forEach((price, index) => {
    elements[index].innerHTML = price * rate
  });
}

document.getElementById("selector").onchange = function() {
  updatePrices(rates[this.value]);
}


updatePrices(rates.USD);

<div class="row">
  <div class="input-field col s1">
    <select id="selector">
          <option value="USD" selected>USD</option>
          <option value="EUR">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<ul class="currencies">
  <li class="price"></li>
  <li class="price"></li>
  <li class="price"></li>
</ul>

You miss the currency code but is the more elegant for many prices on the page — mplungjan, Sep 28 '17 at 04:55
@mplungjan as I said the idea is the same, nothing is stopping you from adding it. — php_nub_qq, Sep 28 '17 at 05:41
This is nice because this is all vanilla - no jquery :) Question though? What if the data needs to be inputed inlined? Like in cms content wise? — Riskbreaker, Dec 19 '17 at 21:07
@Riskbreaker it doesn't matter where your data is coming from or I don't understand the question. — php_nub_qq, Dec 21 '17 at 11:17

mplungjan · Accepted Answer · 2017-09-28T04:51:06.730

Since you would have to update the prices whenever the exchange rate changed, you can have two sets

Data attributes

$(function() {
  $("#curr").on("change",function() {
    var curr   = this.value;
    var prefix = curr=="usd"; // or ["usd","yen",...].indexOf(curr); for more
    var sign   = curr=="usd"?"$":"€";
    $(".price").each(function(){
      $(this).text(
        (prefix?sign:"")   +
        $(this).data(curr) +
        (prefix?"":sign)
      );  
    })
  }).change();
});

input.select-dropdown {
  color: #26a69a;
}
.caret {
  background:url("http://svgshare.com/i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}
.currencies { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">

  <div class="input-field col s1">
    <select id="curr">
          <option value="usd" selected>USD</option>
          <option value="eur">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<br />Price 1
  <span class="price" data-usd="1,500" data-eur="1.271">$1,500</span>

<br />Price 2

<span class="price" data-usd="2,000" data-eur="1.702">$2,000</span>

<br />Price 3

<span class="price" data-usd="342" data-eur="291">$342</span>

Show and hide:

$(function() {
  $("#curr").on("change",function() {
    $(".currencies").hide();
    $("."+this.value).show();
  }).change();
});

input.select-dropdown {
  color: #26a69a;
}
.caret {
  background:url("http://svgshare.com/i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}
.currencies { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">

  <div class="input-field col s1">
    <select id="curr">
          <option value="usd" selected>USD</option>
          <option value="eur">EUR</option>
        </select>
    <label>Currency</label>
  </div>
</div>


<ul class="currencies usd">
  <li class="price">$1,500</li>
  <li class="price">$2,000</li>
  <li class="price">$342</li>
</ul>
<ul class="currencies eur">
  <li class="price">1.276€</li>
  <li class="price">1.702€</li>
  <li class="price">291€</li>
</ul>

this seems like a reasonably simple solution. I have a question though, the euro sign should go after the price, not before like the dollar... I've been tinkering for a while now, but can't make it happen with your code! Could you help me out, please? — lastnoob, Sep 27 '17 at 21:54
Please see update - As a Euro user I actually prefer EUR1.200 instead of 1.200€ — mplungjan, Sep 28 '17 at 07:25

score 0 · Answer 3 · answered Sep 27 '17 at 17:05

Instead of switching the sign using jquery - you can use CSS class (Based on: how to add a dollar sign through css content)
```
ul.dollar li:before {
  content: "\0024";
}
ul.euro li:before {
  content: "\20ac";
}
```

For changing the value in each one you should use each

  $.each($(".price"), function(i, p) {
    var convertedToNumber = parseFloat($(p).text());
    var eurPrice = convertedToNumber / 1.18;
    $(p).text(eurPrice);
  });

See running example here: https://codepen.io/anon/pen/oGZrpX

1

Your pen does not revert – mplungjan Sep 27 '17 at 17:08

Change all prices on the page from one currency to another with jquery?

3 Answers3