javascript - Currency Converter with Js

So i want to create a simple currency converter using Js and i want to do it by creating to list with 5 available coins(USD,EUR,GPB,AUD and JPY) and user must select from first list the coin he want to convert and the at the second list he must select what coin currency he want as a result.Here is what i have done so far:

function calculate() {
  var amount = parseFloat(document.getElementById("amount").value);
  var select = document.getElementById("select");
  var select1 = document.getElementById("select1");
  var result = document.getElementById("result");

  if (select.value === "USD") && (select1.value === "USD")  {
    result.value = (amount * 1);
  }
  if (select.value === "USD") && (select1.value === "EUR")  {
    result.value = (amount * 0.88);
  }
  if (select.value === "USD") && (select1.value === "AUD")  {
    result.value = (amount * 1.37);
  }
  if (select.value === "USD") && (select1.value === "GBP")  {
    result.value = (amount * 0.69);
  }
  if (select.value === "USD") && (select1.value === "JPY")  {
    result.value = (amount * 108.96);
  }
  if (select.value === "EUR") && (select1.value === "EUR")  {
    result.value = (amount * 1);
  }
  if (select.value === "EUR") && (select1.value === "USD")  {
    result.value = (amount * 1.13);
  }
  if (select.value === "EUR") && (select1.value === "AUD")  {
    result.value = (amount * 1.55);
  }
  if (select.value === "EUR") && (select1.value === "GBP")  {
    result.value = (amount * 0.79);
  }
  if (select.value === "EUR") && (select1.value === "JPY")  {
    result.value = (amount * 123.47);
  }
  if (select.value === "EUR") && (select1.value === "EUR")  {
    result.value = (amount * 1);
  }
  if (select.value === "EUR") && (select1.value === "USD")  {
    result.value = (amount * 1.13);
  }
  if (select.value === "EUR") && (select1.value === "AUD")  {
    result.value = (amount * 1.55);
  }
  if (select.value === "EUR") && (select1.value === "GBP")  {
    result.value = (amount * 0.79);
  }
  if (select.value === "EUR") && (select1.value === "JPY")  {
    result.value = (amount * 123.47);
  }
  if (select.value === "GPB") && (select1.value === "EUR")  {
    result.value = (amount * 1.27);
  }
  if (select.value === "GPB") && (select1.value === "USD")  {
    result.value = (amount * 1.44);
  }
  if (select.value === "GPB") && (select1.value === "AUD")  {
    result.value = (amount * 1.98);
  }
  if (select.value === "GPB") && (select1.value === "GBP")  {
    result.value = (amount * 1);
  }
  if (select.value === "GPB") && (select1.value === "JPY")  {
    result.value = (amount * 157.08);
  }
  if (select.value === "AUD") && (select1.value === "EUR")  {
    result.value = (amount * 0.64);
  }
  if (select.value === "AUD") && (select1.value === "USD")  {
    result.value = (amount * 0.73);
  }
  if (select.value === "AUD") && (select1.value === "AUD")  {
    result.value = (amount * 1);
  }
  if (select.value === "AUD") && (select1.value === "GBP")  {
    result.value = (amount * 0.51);
  }
  if (select.value === "AUD") && (select1.value === "JPY")  {
    result.value = (amount * 79.51);
  }
  if (select.value === "JPY") && (select1.value === "EUR")  {
    result.value = (amount * 0.0081);
  }
  if (select.value === "JPY") && (select1.value === "USD")  {
    result.value = (amount * 0.0092);
  }
  if (select.value === "JPY") && (select1.value === "AUD")  {
    result.value = (amount * 0.013);
  }
  if (select.value === "JPY") && (select1.value === "GBP")  {
    result.value = (amount * 0.0064);
  }
  if (select.value === "JPY") && (select1.value === "JPY")  {
    result.value = (amount * 1);
  }
}

<h1>Convert US Dollars to Euros </h1>
<form>
  <p>
    <label for="amount">Amount:</label>
    <input type="text" id="amount" value="">
    <select id="select">
      <option value="USD">USD </option>
      <option value="EUR">EUR </option>
      <option value="GPB">GBP </option>
      <option value="AUD">AUD </option>
      <option value="JPY">JPY </option>
    </select>
    <select id="select1">
      <option value="USD">USD </option>
      <option value="EUR">EUR </option>
      <option value="GPB">GBP </option>
      <option value="AUD">AUD </option>
      <option value="JPY">JPY </option>
    </select>
    <input type="text" id="result" value="">
  </p>
  <p>
    <input type="button" value="Calculate" onclick="calculate();">
    <input type="reset" value="Reset">
  </p>
</form>

function calculate() {
  var amount = parseFloat(document.getElementById("amount").value);
  var select = document.getElementById("select");
  var select1 = document.getElementById("select1");
  var result = document.getElementById("result");

  if (select.value === "USD") && (select1.value === "USD")  {
    result.value = (amount * 1);
  }
  if (select.value === "USD") && (select1.value === "EUR")  {
    result.value = (amount * 0.88);
  }
  if (select.value === "USD") && (select1.value === "AUD")  {
    result.value = (amount * 1.37);
  }
  if (select.value === "USD") && (select1.value === "GBP")  {
    result.value = (amount * 0.69);
  }
  if (select.value === "USD") && (select1.value === "JPY")  {
    result.value = (amount * 108.96);
  }
  if (select.value === "EUR") && (select1.value === "EUR")  {
    result.value = (amount * 1);
  }
  if (select.value === "EUR") && (select1.value === "USD")  {
    result.value = (amount * 1.13);
  }
  if (select.value === "EUR") && (select1.value === "AUD")  {
    result.value = (amount * 1.55);
  }
  if (select.value === "EUR") && (select1.value === "GBP")  {
    result.value = (amount * 0.79);
  }
  if (select.value === "EUR") && (select1.value === "JPY")  {
    result.value = (amount * 123.47);
  }
  if (select.value === "EUR") && (select1.value === "EUR")  {
    result.value = (amount * 1);
  }
  if (select.value === "EUR") && (select1.value === "USD")  {
    result.value = (amount * 1.13);
  }
  if (select.value === "EUR") && (select1.value === "AUD")  {
    result.value = (amount * 1.55);
  }
  if (select.value === "EUR") && (select1.value === "GBP")  {
    result.value = (amount * 0.79);
  }
  if (select.value === "EUR") && (select1.value === "JPY")  {
    result.value = (amount * 123.47);
  }
  if (select.value === "GPB") && (select1.value === "EUR")  {
    result.value = (amount * 1.27);
  }
  if (select.value === "GPB") && (select1.value === "USD")  {
    result.value = (amount * 1.44);
  }
  if (select.value === "GPB") && (select1.value === "AUD")  {
    result.value = (amount * 1.98);
  }
  if (select.value === "GPB") && (select1.value === "GBP")  {
    result.value = (amount * 1);
  }
  if (select.value === "GPB") && (select1.value === "JPY")  {
    result.value = (amount * 157.08);
  }
  if (select.value === "AUD") && (select1.value === "EUR")  {
    result.value = (amount * 0.64);
  }
  if (select.value === "AUD") && (select1.value === "USD")  {
    result.value = (amount * 0.73);
  }
  if (select.value === "AUD") && (select1.value === "AUD")  {
    result.value = (amount * 1);
  }
  if (select.value === "AUD") && (select1.value === "GBP")  {
    result.value = (amount * 0.51);
  }
  if (select.value === "AUD") && (select1.value === "JPY")  {
    result.value = (amount * 79.51);
  }
  if (select.value === "JPY") && (select1.value === "EUR")  {
    result.value = (amount * 0.0081);
  }
  if (select.value === "JPY") && (select1.value === "USD")  {
    result.value = (amount * 0.0092);
  }
  if (select.value === "JPY") && (select1.value === "AUD")  {
    result.value = (amount * 0.013);
  }
  if (select.value === "JPY") && (select1.value === "GBP")  {
    result.value = (amount * 0.0064);
  }
  if (select.value === "JPY") && (select1.value === "JPY")  {
    result.value = (amount * 1);
  }
}

<h1>Convert US Dollars to Euros </h1>
<form>
  <p>
    <label for="amount">Amount:</label>
    <input type="text" id="amount" value="">
    <select id="select">
      <option value="USD">USD </option>
      <option value="EUR">EUR </option>
      <option value="GPB">GBP </option>
      <option value="AUD">AUD </option>
      <option value="JPY">JPY </option>
    </select>
    <select id="select1">
      <option value="USD">USD </option>
      <option value="EUR">EUR </option>
      <option value="GPB">GBP </option>
      <option value="AUD">AUD </option>
      <option value="JPY">JPY </option>
    </select>
    <input type="text" id="result" value="">
  </p>
  <p>
    <input type="button" value="Calculate" onclick="calculate();">
    <input type="reset" value="Reset">
  </p>
</form>

But so far it doesn't work at all... And i cannot understand why... What have i done wrong?

Share Improve this question edited May 16, 2016 at 17:58 Brayniverse 2603 silver badges15 bronze badges asked May 16, 2016 at 17:45 Aggelos Sfakianos 1576 silver badges19 bronze badges

1 What about it doesn't work? Do you see any errors in your console? – Mike Cluck Commented May 16, 2016 at 17:46
When i press the "Calculate" button nothing happens... – Aggelos Sfakianos Commented May 16, 2016 at 17:52
You need to check your console (hit F12 on Windows or Opt + Cmd + I on Mac). You'll be able to see what's wrong by reading those errors. – Mike Cluck Commented May 16, 2016 at 17:54

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

The if statements should not be closed between && signs. So where you have

if (select.value === "EUR") && (select1.value === "EUR")

it should be

if (select.value === "EUR" && select1.value === "EUR")

The problem is with the brackets but your ifstatements should be an if else if because one a match is found you don't need to check the other rates.

if (select.value === "USD" && select1.value === "USD")  {
    result.value = (amount * 1);
} else if (select.value === "USD" && select1.value === "EUR")  {
    result.value = (amount * 0.88);
}

An even better approach would be to create an object of all the rates and check the rate exists using a single if statement.

var rates = {
    USD : {
        USD: 1,
        EUR: 0.88,
        AUD: 1.37,
    },
    EUR : {
        EUR : 1,
        USD : 1.13,
        AUD : 1.55,
    }
}

if(rates[select.value] && rates[select.value][select1.value]){
    result.value = amount * rates[select.value][select1.value];
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Currency Converter with Js - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)