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

Question

我在试着建立一个货币转换器。我正在使用javascript，我有一个良好的基础，但我想知道如何使转换器实时更新，而不必单击一个按钮。

如何使转换器不需要在select元素中从基本货币M进行转换&如何使转换器在用户输入数字时进行更新，而不必单击按钮？

我已经尝试删除了..currency 1类的所有可用选项，并且只留下了M，但这仍然留下了下拉菜单。我想从M转换到X(美元，英镑，CAD，欧元等)

​

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，没有下拉)，选择他们的本币&让页面计算速度，一旦他们输入数字。

Answer 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>

​

Answer 2

​

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>

​