输入负数时显示错误消息

Question

输入负数时显示错误消息

我正在使用 API 构建货币转换器。当在金额输入字段中输入负数时，我想显示一条错误消息。这可以使用 promise 中的 catch 函数处理吗？

请帮忙，谢谢

这是html和javascript代码

HTML

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="currency.css"/>
    <script defer src="currency.js"></script>
    <title>Currency calculator</title>
</head>
<body>
    <div class="wrapper">
    <h1>Currency converter</h1>
    <p>Choose the currency and the amount</p>
    <div class="container">
        <div class="currency">
            <select id="currency-one">
                <option value="AED">AED</option>
          <option value="ARS">ARS</option>
          <option value="AUD">AUD</option>
          <option value="BGN">BGN</option>
          <option value="BRL">BRL</option>
          <option value="BSD">BSD</option>
          <option value="CAD">CAD</option>
          <option value="CHF">CHF</option>
          <option value="CLP">CLP</option>
          <option value="CNY">CNY</option>
          <option value="COP">COP</option>
          <option value="CZK">CZK</option>
          <option value="DKK">DKK</option>
          <option value="DOP">DOP</option>
          <option value="EGP">EGP</option>
          <option value="EUR">EUR</option>
          <option value="FJD">FJD</option>
          <option value="GBP">GBP</option>
          <option value="GTQ">GTQ</option>
          <option value="HKD">HKD</option>
          <option value="HRK">HRK</option>
          <option value="HUF">HUF</option>
          <option value="IDR">IDR</option>
          <option value="ILS">ILS</option>
          <option value="INR">INR</option>
          <option value="ISK">ISK</option>
          <option value="JPY">JPY</option>
          <option value="KRW">KRW</option>
          <option value="KZT">KZT</option>
          <option value="MXN">MXN</option>
          <option value="MYR">MYR</option>
          <option value="NOK">NOK</option>
          <option value="NZD">NZD</option>
          <option value="PAB">PAB</option>
          <option value="PEN">PEN</option>
          <option value="PHP">PHP</option>
          <option value="PKR">PKR</option>
          <option value="PLN">PLN</option>
          <option value="PYG">PYG</option>
          <option value="RON">RON</option>
          <option value="RUB">RUB</option>
          <option value="SAR">SAR</option>
          <option value="SEK">SEK</option>
          <option value="SGD">SGD</option>
          <option value="THB">THB</option>
          <option value="TRY">TRY</option>
          <option value="TWD">TWD</option>
          <option value="UAH">UAH</option>
          <option value="USD" selected>USD</option>
          <option value="UYU">UYU</option>
          <option value="VND">VND</option>
          <option value="ZAR">ZAR</option>
            </select>
        <input type="number" min= "0" id="amount-one" value="1">
        </div>

        <div class="swap-rate-container">
            <button class="btn">Swap</button>
            <div class="rate"></div>
        </div>
        <div class="currency">
        <select id="currency-two">
            <option value="AED">AED</option>
      <option value="ARS">ARS</option>
      <option value="AUD">AUD</option>
      <option value="BGN">BGN</option>
      <option value="BRL">BRL</option>
      <option value="BSD">BSD</option>
      <option value="CAD">CAD</option>
      <option value="CHF">CHF</option>
      <option value="CLP">CLP</option>
      <option value="CNY">CNY</option>
      <option value="COP">COP</option>
      <option value="CZK">CZK</option>
      <option value="DKK">DKK</option>
      <option value="DOP">DOP</option>
      <option value="EGP">EGP</option>
      <option value="EUR">EUR</option>
      <option value="FJD">FJD</option>
      <option value="GBP">GBP</option>
      <option value="GTQ">GTQ</option>
      <option value="HKD">HKD</option>
      <option value="HRK">HRK</option>
      <option value="HUF">HUF</option>
      <option value="IDR">IDR</option>
      <option value="ILS">ILS</option>
      <option value="INR" selected>INR</option>
      <option value="ISK">ISK</option>
      <option value="JPY">JPY</option>
      <option value="KRW">KRW</option>
      <option value="KZT">KZT</option>
      <option value="MXN">MXN</option>
      <option value="MYR">MYR</option>
      <option value="NOK">NOK</option>
      <option value="NZD">NZD</option>
      <option value="PAB">PAB</option>
      <option value="PEN">PEN</option>
      <option value="PHP">PHP</option>
      <option value="PKR">PKR</option>
      <option value="PLN">PLN</option>
      <option value="PYG">PYG</option>
      <option value="RON">RON</option>
      <option value="RUB">RUB</option>
      <option value="SAR">SAR</option>
      <option value="SEK">SEK</option>
      <option value="SGD">SGD</option>
      <option value="THB">THB</option>
      <option value="TRY">TRY</option>
      <option value="TWD">TWD</option>
      <option value="UAH">UAH</option>
      <option value="USD">USD</option>
      <option value="UYU">UYU</option>
      <option value="VND">VND</option>
      <option value="ZAR">ZAR</option>
        </select>
        <input type="number" id="amount-two">
    </div>
    </div>
</div>
</body>
</html>

Javascript code

    const currencyOne = document.querySelector('#currency-one');
const currencyTwo = document.querySelector('#currency-two');
const amountOne = document.querySelector('#amount-one');
const amountTwo = document.querySelector('#amount-two');
const swapButton = document.querySelector('.btn');
const rateEl = document.querySelector('.rate');


//Calculate function to fetch currency rates

function calculate(){
    const currency_one = currencyOne.value;
    const currency_two = currencyTwo.value;
    fetch(`https://v6.exchangerate-api.com/v6/0a8724f8d325969fedf0f714/latest/${currency_one}`)
   .then(res => res.json())
.then(data =>{
const rate = data.conversion_rates[currency_two];
rateEl.innerHTML = `1 ${currency_one} = ${rate} ${currency_two}`;
amountTwo.value = (amountOne.value * rate).toFixed(2);
})
}

//event listener for currency element 1
currencyOne.addEventListener('change',calculate);
currencyTwo.addEventListener('change',calculate);
amountOne.addEventListener('input',calculate);
amountTwo.addEventListener('input',calculate);

swapButton.addEventListener('click',function(){
    const temp = currencyOne.value;
    currencyOne.value = currencyTwo.value;
    currencyTwo.value = temp;
    calculate();
})
calculate();

Answer 1

您可以在 .catch 中完成。但是，这是一个坏主意，因为您将向服务器发送不正确的数据。

你应该做的是，在 calculate() 中，在调用 fetch 之前验证数字是否为正 api。

Answer 2

我会在 calculate 函数中首先检查它，如下所示：

function calculate() {
  const currency_one = currencyOne.value;
  const currency_two = currencyTwo.value;
  if (currency_one < 0 || currency_two < 0 ) {
    alert("currency cannot be less than 0");
  } else {
    fetch(
      `https://v6.exchangerate-api.com/v6/0a8724f8d325969fedf0f714/latest/${currency_one}`
    )
      .then((res) => res.json())
      .then((data) => {
        const rate = data.conversion_rates[currency_two];
        rateEl.innerHTML = `1 ${currency_one} = ${rate} ${currency_two}`;
        amountTwo.value = (amountOne.value * rate).toFixed(2);
      });
  }
}

输入负数时显示错误消息

Display error message on entering a negative number

javascript

es6-promise