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(".svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}

<script src=".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>

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./i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}

<script src="https://ajax.googleapis./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 27, 2017 at 16:55 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Sep 27, 2017 at 16:39 lastnooblastnoob 64811 gold badge1313 silver badges2929 bronze badges 2

• 1 For the dollar sign you can use CSS classes. See here: stackoverflow./questions/29997297/… – Igal S. Commented Sep 27, 2017 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 Commented Sep 27, 2017 at 17:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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>

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./i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}
.currencies { display:none }

<script src="https://ajax.googleapis./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./i/3Bc.svg") no-repeat 90% 50%;
  width:20px;
  height:auto;
}
.currencies { display:none }

<script src="https://ajax.googleapis./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>

1. 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";
   }
   

2. 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