I have created a currency converter which works well, but there are two issues after I decided to add swap button. First, my swap button only works once. For example, if I have on the screen: 5 Euros = 147.592998 Cuban Pesos, clicking the swap button will change it to 5 Cuban Pesos = 0.169385 Euros (and will also change the text below it), but when I click to swap for the second time, nothing changes on the screen, while I would like to have it back to 5 Euros = 147.592998 Cuban Pesos. Also, another issue is that values in my options list don't change. If I have EUR - Euro as 'from' value and CUP - Cuban Peso as 'to' value, clicking the swap button should make EUR as 'to' value but I don't see any change on the screen. I thought I had it covered with destructuring assignment but it didn't work out. Here is my JS and full code on codepen: https://codepen.io/argentinaivan/pen/JjORaMb

const currencies = "https://openexchangerates.org/api/currencies.json";

const input = document.querySelector("#amount");
const button = document.querySelector("#convert");
const swap = document.querySelector(".iconBox");
const resultHeading = document.querySelector("#result");
const fromToText = document.querySelector("#fromTo");
const toFromText = document.querySelector("#toFrom");

const select = document.querySelectorAll("select");

async function getCurrencies() {
  const response = await fetch(currencies);
  const data = await response.json();

  const keys = Object.keys(data);
  const values = Object.values(data);

  for (let i = 0; i < keys.length; i  ) {
    if (keys[i].match(/(CLF|CNH|MRO|STD|VEF|XAG|XAU|XPD|XPT)/)) continue;
    select[0].innerHTML =
      select[1].innerHTML  = `<option value="${keys[i]}">${keys[i]} - ${values[i]}</option>`;
  }
}

getCurrencies();

async function getData(reverse = "false") {
  if (input.value > 0) {
    let fromOptions = document.querySelector("#from");
    let toOptions = document.querySelector("#to");
    let fromValue = fromOptions.options[fromOptions.selectedIndex].value;
    let fromText = fromOptions.options[fromOptions.selectedIndex].text;
    let toValue = toOptions.options[toOptions.selectedIndex].value;
    let toText = toOptions.options[toOptions.selectedIndex].text;

    if (reverse === "swap") {
      [fromValue, toValue] = [toValue, fromValue];
      [fromText, toText] = [toText, fromText];
    }

    const url = `https://api.exchangerate.host/convert?from=${fromValue}&to=${toValue}&amount=${input.value}`;

    const response = await fetch(url);
    const data = await response.json();

    resultHeading.innerText = `${input.value} ${fromText.slice(6)}s =
    ${data.result} ${toText.slice(6)}s`;

    fromToText.innerText = `1 ${fromValue} = ${data.info.rate} ${toValue}`;
    toFromText.innerText = `1 ${toValue} = ${1 / data.info.rate} ${fromValue}`;
  } else {
    resultHeading.innerHTML = "Please, enter a valid amount";
    resultHeading.style.fontSize = "16px";
    fromToText.innerHTML = "";
    toFromText.innerHTML = "";
    setTimeout(function () {
      resultHeading.innerHTML = "";
      resultHeading.style.fontSize = "32px";
    }, 2000);
  }
}

button.addEventListener("click", getData);

swap.addEventListener("click", () => {
  getData("swap");
});

CodePudding user response：

You need to swap the values of the From and To selects. One way is to swap them and then call the function recursively:

if (reverse === "swap") {
    [toOptions.value, fromOptions.value] = [fromOptions.value, toOptions.value];
    getData();
    return;
}

Or, probably better, do this in the callback before calling getData().

CodePudding user response：

you need to swap your options as well.

suggest using different functions

but using your code:

if (reverse === "swap") {
  [fromOptions.selectedIndex ,toOptions.selectedIndex] = [toOptions.selectedIndex ,fromOptions.selectedIndex
 ];
      
 [fromValue, toValue] = [toValue, fromValue];
 [fromText, toText] = [toText, fromText];
}