Replace text in elements with the same class-CodePudding

I have some products in a page

<p class="wt-text-title-01">
   <span class="wt-screen-reader-only">
   Sale Price USD 5
   </span>
   <span aria-hidden="true">
   <span class="currency-symbol">USD </span><span class="currency-value">5</span>
   </span>
</p>

I have a total of 36 products with different prices. I want to go through every product and converting the the currency with the currency symbol i have and also the multiply the USD value with the exchange rate of the detected currency.

I have this code

var request = new XMLHttpRequest();

let exchange_rate = 1;

request.open('GET', 'https://api.ipdata.co/?api-key=apikey');

request.setRequestHeader('Accept', 'application/json');

const http = new XMLHttpRequest();


request.onreadystatechange = function () {

    if (this.readyState === 4) {
        console.log(this.responseText);
        let data = JSON.parse(this.responseText);
        let currency = data.currency.code;

        if (currency == 'USD') {
            exchange_rate = 1;
        }
        if (currency == 'EUR') {
            exchange_rate = 1.28;
        }
        if (currency == 'GBP') {
            exchange_rate = 0.73;
        }
        if (currency == 'CAD') {
            exchange_rate = 0.78740;
        };
        $('.currency-symbol').text(currency);
        let v = $('.currency-value').val();

        $('.currency-value').each(function (i, obj) {
            let cv = parseInt($('.currency-value').text()) * exchange_rate;
            $('.currency-value').text(' '   cv);
        });

    }
};

request.send();

I am able to change the currency symbol for all 36 products but the currency conversion doesn't seem to work. Since each class has a different value, how can i set the correct converted currency amount for every product?

CodePudding user response：

When looping on currency values instead of calling the selector again use obj like:

$('.currency-value').each(function (i, obj) {
    let cv = parseInt($(obj).text()) * exchange_rate;
    $(obj).text(' '   cv);
});

CodePudding user response：

The simplest way to achieve what you require is to create an object containing th exchange rates, keyed by the currency code. Then you can simply retrieve that value based on the code in the response from the API, and perform the exchange rate calculation.

Also note the use of text() instead of val() in the following example as div elements do not have a value property.

Finally, and most importantly, given the exchange values you're using, you need to divide by that exchange rate in your calculation.

With all that said, try this:

// note updated to be more accurate based on todays prices
let exchangeRates = {
  'USD': 1,
  'EUR': 1.17,
  'GBP': 1.37,
  'CAD': 0.7874
}

// mock response from AJAX call. Irrelevant properties removed.
let responseText = {
  "currency": {
    "name": "Euro",
    "code": "EUR",
    "symbol": "€",
    "native": "€",
    "plural": "Euros"
  }
}

// inside your XMLHttpRequest onreadystatechange handler:
$('.currency-symbol').text(responseText.currency.symbol);
$('.currency-value').text((i, t) => (t / exchangeRates[responseText.currency.code]).toFixed(2));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="wt-text-title-01">
  <span class="wt-screen-reader-only">Sale Price USD 5</span>
  <span aria-hidden="true">
    <span class="currency-symbol">USD</span>
  <span class="currency-value">5</span>
  </span>
</p>
<p class="wt-text-title-01">
  <span class="wt-screen-reader-only">Sale Price USD 10</span>
  <span aria-hidden="true">
    <span class="currency-symbol">USD</span>
  <span class="currency-value">10</span>
  </span>
</p>
<p class="wt-text-title-01">
  <span class="wt-screen-reader-only">Sale Price USD 15.99</span>
  <span aria-hidden="true">
    <span class="currency-symbol">USD</span>
  <span class="currency-value">15.99</span>
  </span>
</p>

CodePudding user response：

I'm not that familiar with the jQuery and all, but shouldn't you rather do something like this:

obj.textContent = ' '   cv;

instead of this:

$('.currency-value').text(' '   cv);