Converting amount to a different currency dynamically using JavaScript

Question

I would like to allow users to convert the price of a product based on their currency. I am trying to use the [openexchangesrate][1] api for this purpose. However when I select a different currency, the price remains the same and does not convert to the selected currency.

This is what I have tried:

html

    <div class="wrapper">
      <form class="form-inline">
        <label class="sr-only" for="inlineFormInputGroup">Amount</label>
        <div class="input-group mb-2 mr-sm-2 mb-sm-0">
          <div class="input-group-addon currency-symbol">$</div>
          <input type="text" class="form-control currency-amount" id="inlineFormInputGroup" placeholder="100" size="8">
          <div class="input-group-addon currency-addon">

            <select class="currency-selector">
              <option id='USD' data-symbol="$">USD</option>
              <option id='USD' data-symbol="¥">ZAR</option>
            </select>

          </div>
        </div>
      </form>
    </div>

css

.currency-selector {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-left: 0.5rem;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1024' height='640'><path d='M1017 68L541 626q-11 12-26 12t-26-12L13 68Q-3 49 6 24.5T39 0h952q24 0 33 24.5t-7 43.5z'></path></svg>")
    90%/12px 6px no-repeat;
  font-family: inherit;
  color: inherit;
}
.currency-amount {
  text-align: right;
}
.currency-addon {
  width: 6em;
  text-align: left;
  position: relative;
}

javascript

<script>
function updateSymbol(e) {
  var selected = $(".currency-selector option:selected");
  $(".currency-symbol").text(selected.data("symbol"));
  $(".currency-amount").prop("placeholder", selected.data("placeholder"));
  $(".currency-addon-fixed").text(selected.text());
}
$(".currency-selector").on("change", updateSymbol);
updateSymbol();

</script>

<!-- this is to convert the currency --> 

<script>
$.getJSON(
  "https://openexchangerates.org/api/latest.json?app_id=2339143d97cf4826a4e3fa0d38d291de",
  function (data) {
    var currency = document.getElementById("USD").innerText;
    if (currency == "USD") {
      $(".inlineFormInputGroup").html(data.rates.USD);
    } else if ((currency = "ZAR")) {
      $(".inlineFormInputGroup").html(data.rates.ZAR);
    }
  }
);

</script>

Answer 1

You have made event handler for currency selector, but you have not associated any onchange with your currency drop down. Secondly, you are using $('.inlineFormInputGroup') for the id. It should be $('#inlineFormInputGroup')

Below is a basic working copy. You can carry your work on it

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>

</style>
<div class="wrapper">
  <form class="form-inline">
    <label class="sr-only" for="inlineFormInputGroup">Amount</label>
    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
      <div class="input-group-addon currency-symbol">$</div>
      <input type="text" class="form-control currency-amount" id="inlineFormInputGroup" value="150" placeholder="100" size="8">
      <div class="input-group-addon currency-addon">

        <select class="currency-selector" onchange="changeCurrency()">
          <option data-symbol="$">USD</option>
          <option  data-symbol="¥">ZAR</option>
        </select>

      </div>
    </div>
  </form>
</div>

<!--this is to control the currency symbol -->
<script>
        function updateSymbol(e){
        var selected = $(".currency-selector option:selected");
        $(".currency-symbol").text(selected.data("symbol"))
        $(".currency-amount").prop("placeholder", selected.data("placeholder"))
        $('.currency-addon-fixed').text(selected.text())
        }
        $(".currency-selector").on("change", updateSymbol)
        updateSymbol()
</script>
<!-- this is to convert the currency -->
<script>


function changeCurrency()
{
    $.getJSON("https://openexchangerates.org/api/latest.json?app_id=2339143d97cf4826a4e3fa0d38d291de",
    function(data){
	
    var currency = $('.currency-selector').val();
	var useramount =150;
    if (currency == "USD") {
        $('#inlineFormInputGroup').val(data.rates.USD * useramount);
		
        }
        else if (currency="ZAR") {
        $('#inlineFormInputGroup').val(data.rates.ZAR * useramount);
		
     }
	 });
}

</script>