简单的货币转换器答案

【问题标题】：Simple Currency Converter简单的货币转换器
【发布时间】：2021-03-06 10:26:30
【问题描述】：

我正在尝试使用 nbp 的 api（“https://api.nbp.pl/?ref=public-apis”）创建从波兰兹罗提到 3 种差价货币（瑞士法郎、欧元、美元）的简单货币兑换器。我使用axost方法。几行代码后，我意识到这对我来说是 JS 知识水平。在我提问之前，我会展示我的代码。

const input = document.querySelector("input");
const selector = document.querySelector("currencies");
const button = document.querySelector("button");

input.addEventListener('input', calculate);
selector.addEventListener('change', calculate);

button.addEventListener('click', () => {
  input.value = selector.value;
  calculate();
});

let one = "http://api.nbp.pl/api/exchangerates/rates/A/CHF/";
let two = "http://api.nbp.pl/api/exchangerates/rates/A/EUR/";
let three = "http://api.nbp.pl/api/exchangerates/rates/A/USD/";

const requestOne = axios.get(one);
const requestTwo = axios.get(two);
const requestThree = axios.get(three);

axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
    const responseOne = responses[0]
    const responseTwo = responses[1]
    const responesThree = responses[2]
     
  })).catch(errors => {
    console.log(errors);
  });

function calculate() {
    let selVal = selector.value;
    if (input.value == "") {
        !alert("Wpisz kwotę")
    } else {
        let result = input.value * responses[0]
        let endresult = document.querySelector('endresult');
        endresult.innerHTML = result + "zł"
    }
    
}

<!DOCTYPE html>
<html lang="pl-PL">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta name="Marcin Panasiuk" content="SitePoint">
    <title>Project Java 2- Przelicznik walut</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
 </head>
  <body>
    <div class="container">
        <div class="header">
            <h1>Przelicznik walut</h1>
        </div>
    </div>
    <div class="container-przel">
        <input id="input" placeholder="0">
        <select id="currencies">
            <option value="CHF">CHF</option>
            <option value="EUR">EUR</option>
            <option value="USD">USD</option>
        </select>
        
      <button id="button" type="button" onclick="calculate()">Przelicz!</button>
    </div>
    <div>
        <p id="endresult"></p>
    </div>
      
  </body>
</html>

第一个问题：

如何将 axios respose 连接到某个选项值（从 .get CHF 到使用 CHF 货币的选项的响应）。
如果 input.value 为空，则警报不起作用我设置它 - 警报应该通知在输入中放入一些东西。
按钮不检测函数calculate()。
还有其他提示吗？

感谢任何帮助。希望这个帖子可以帮助其他人。

【问题讨论】：

标签： javascript function if-statement axios alert

【解决方案1】：

首先在 querySelector() 中缺少 id 符号 (#)。

您可以调用api并根据选择和输入值的变化计算值。这样我相信你不需要按钮。

演示：

const input = document.querySelector("#input");
const selector = document.querySelector("#currencies")
const button = document.querySelector("#button");
let endresult = document.querySelector('#endresult');

input.addEventListener('input', calculateCur);
selector.addEventListener('change', calculateCur);

function calculateCur(){
  endresult.textContent = 'Calculating....';
  axios.get(`http://api.nbp.pl/api/exchangerates/rates/A/${selector.value}/`).then(res => {
       calculate(res.data.rates[0].mid); //pass the value need for the calculation
    }).catch(errors => {
      console.log(errors);
    });
}
function calculate(responses) {
    let selVal = selector.value;
    if (input.value == "") {
        !alert("Wpisz kwotę")
    } else {
        let result = input.value * responses;
        
        if(!isNaN(result)){
          endresult.textContent = result + "zł";
        }
        else{
          endresult.textContent = "";
        }
    }    
}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container">
    <div class="header">
        <h1>Przelicznik walut</h1>
    </div>
</div>
<div class="container-przel">
    <input id="input" placeholder="0">
    <select id="currencies" oninput= "calculate()">
        <option value="CHF">CHF</option>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
    </select>
</div>
<div>
    <p id="endresult"></p>
</div>

解决方案：将所有代码明智的货币值存储在一个数组中。然后在change上获取对应的值。

const input = document.querySelector("#input");
const selector = document.querySelector("#currencies");
const button = document.querySelector("#button");

input.addEventListener('input', calculate);
selector.addEventListener('change', calculate);

button.addEventListener('click', () => {
  calculate();
});

let one = "http://api.nbp.pl/api/exchangerates/rates/A/CHF/";
let two = "http://api.nbp.pl/api/exchangerates/rates/A/EUR/";
let three = "http://api.nbp.pl/api/exchangerates/rates/A/USD/";

const requestOne = axios.get(one);
const requestTwo = axios.get(two);
const requestThree = axios.get(three);

var currArr = [];

axios.all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
  for(var i of responses){
    currArr.push({code:i.data.code, value: i.data.rates[0].mid});
  }
  })).catch(errors => {
    console.log(errors);
  });

function calculate() {
  let selVal = selector.value;
  if (input.value == "") {
    alert("Wpisz kwotę")
  } else {
    let res = currArr.filter(i => i.code == selVal)[0].value;
    let result = input.value * res;
    let endresult = document.querySelector('#endresult');
    endresult.textContent = result + "zł"
  }    
}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div class="container">
    <div class="header">
        <h1>Przelicznik walut</h1>
    </div>
</div>
<div class="container-przel">
    <input id="input" placeholder="0">
    <select id="currencies">
        <option value="CHF">CHF</option>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
    </select>

  <button id="button" type="button" onclick="calculate()">Przelicz!</button>
</div>
<div>
    <p id="endresult"></p>
</div>

【讨论】：