如何使用javascript创建货币转换器？

时间：2019-06-07 05:41:09

标签： javascript

我正在尝试建立货币转换器。我正在使用javascript，并且拥有良好的基础，但是我想知道如何实时转换转换器而无需单击按钮。

我如何做到这一点，以便我的转换器从M的基础货币转换而不必在选择元素内？我如何在用户键入数字时使转换器更新，而不必单击按钮？

我尝试删除.currency-1类的所有可用选项，仅保留M，但这仍然留下一个下拉菜单。我想从M转换为X（USD，GBP，CAD，EUR等）

var crrncy = {
  'M': {
    'USD': 0.80,
    'GBP': 0.65,
    'EUR': 0.77,
    'CAD': 0.95,
    'M': 1
  },
};

var btn = document.querySelector('.calculate-btn');
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');

function convertCurrency(event) {
  event.preventDefault();
  var amount = amountInput.value;
  var from = baseCurrencyInput.value;
  var to = secondCurrencyInput.value;
  var result = 0;
  
  try{
    if (from == to){
      result = amount;
    } else {
     result = amount * crrncy[from][to];
    }
  } catch(err) {
    result = amount * (1 / crrncy[to][from]);
  }
  
  toShowAmount.innerHTML = amount;
  toShowBase.textContent = from + ' = ';
  toShowSecond.textContent = to;
  toShowResult.textContent = result; 
}

btn.addEventListener('click', convertCurrency);
<div class="jumbotron">
  <div class="container">
    <form class="form-inline">
      <div class="form-group mb-2">
        <input type="number" class="form-control" id="amount"/>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <select class="form-control" id="currency-1" required>
          <option>M</option>
        </select>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <select class="form-control" id="currency-2" required>
          <option>USD</option>
          <option>GBP</option>
          <option>EUR</option>
          <option>CAD</option>
        </select>
      </div>  
      <button class="btn calculate-btn btn-primary mb-2">Sum</button>
    </form>
    <div class="result">
      <p>
        <span class="given-amount"></span> 
        <span class="base-currency"></span>
        <span class="final-result"></span> 
        <span class="second-currency"></span>
      </p>
    </div>
  </div> 
</div>

任何帮助将不胜感激！

我需要用户能够输入X金额（以货币M，没有下拉菜单），选择其本国货币并让页面在输入数字后立即计算汇率。

2 个答案:

答案 0 :(得分：1)

添加另一个eventListner keyup，以便每当用户在必填字段中键入内容时，它将调用convertCurrency函数，如下所示：

amountInput.addEventListener('keyup', convertCurrency);

编辑：

要删除M的选择框，请删除select元素并替换为<p>或<span>标签。之后，您必须通过在货币转换器函数中将innerText用作var from = baseCurrencyInput.innerText;来获得此值。

var crrncy = {
  'M': {
    'USD': 0.80,
    'GBP': 0.65,
    'EUR': 0.77,
    'CAD': 0.95,
    'M': 1
  },
}
var btn = document.querySelector('.calculate-btn');
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');

function convertCurrency(event) {
  event.preventDefault();
  var amount = amountInput.value;
  var from = baseCurrencyInput.innerText;
  var to = secondCurrencyInput.value;
  var result = 0;

  try {
    if (from == to) {
      result = amount;
    } else {
      result = amount * crrncy[from][to];
    }
  } catch (err) {
    result = amount * (1 / crrncy[to][from]);
  }

  toShowAmount.innerHTML = amount;
  toShowBase.textContent = from + ' = ';
  toShowSecond.textContent = to;
  toShowResult.textContent = result;
}

btn.addEventListener('click', convertCurrency);
amountInput.addEventListener('keyup', convertCurrency);
<div class="jumbotron">
  <div class="container">
   <form class="form-inline">
     <div class="form-group mb-2">
        <input type="number" class="form-control" id="amount"/>
     </div>
     <div class="form-group mx-sm-3 mb-2">
        <p id="currency-1">M</p>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <select class="form-control" id="currency-2" required>
          <option>USD</option>
          <option>GBP</option>
          <option>EUR</option>
          <option>CAD</option>
        </select>
      </div>  
      <button class="btn calculate-btn btn-primary mb-2">Sum</button>
    </form>
    <div class="result">
      <p>
        <span class="given-amount"></span> 
        <span class="base-currency"></span>
        <span class="final-result"></span> 
        <span class="second-currency"></span>
      </p>
    </div>
  </div> 
</div>

答案 1 :(得分：1)

var crrncy = {
  'M': {
    'USD': 0.80,
    'GBP': 0.65,
    'EUR': 0.77,
    'CAD': 0.95,
    'M': 1
  },
};

var btn = document.querySelector('.calculate-btn');
var baseCurrencyInput = document.getElementById('currency-1');
var secondCurrencyInput = document.getElementById('currency-2');
var amountInput = document.getElementById('amount');
var toShowAmount = document.querySelector('.given-amount');
var toShowBase = document.querySelector('.base-currency');
var toShowSecond = document.querySelector('.second-currency');
var toShowResult = document.querySelector('.final-result');

function convertCurrency(event) {
  event.preventDefault();
  var amount = amountInput.value;
  var from = baseCurrencyInput.value;
  var to = secondCurrencyInput.value;
  var result = 0;
  
  try{
    if (from == to){
      result = amount;
    } else {
     result = amount * crrncy[from][to];
    }
  } catch(err) {
    result = amount * (1 / crrncy[to][from]);
  }
  
  toShowAmount.innerHTML = amount;
  toShowBase.textContent = from + ' = ';
  toShowSecond.textContent = to;
  toShowResult.textContent = result; 
}

btn.addEventListener('click', convertCurrency);

$('#amount').keyup(function(event){
convertCurrency(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="jumbotron">
  <div class="container">
    <form class="form-inline">
      <div class="form-group mb-2">
        <input type="number" class="form-control" id="amount"/>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <select class="form-control" id="currency-1" required>
          <option>M</option>
        </select>
      </div>
      <div class="form-group mx-sm-3 mb-2">
        <select class="form-control" id="currency-2" required>
          <option>USD</option>
          <option>GBP</option>
          <option>EUR</option>
          <option>CAD</option>
        </select>
      </div>  
      <button class="btn calculate-btn btn-primary mb-2">Sum</button>
    </form>
    <div class="result">
      <p>
        <span class="given-amount"></span> 
        <span class="base-currency"></span>
        <span class="final-result"></span> 
        <span class="second-currency"></span>
      </p>
    </div>
  </div> 
</div>

相关问题
最新问题