javascript

eblbsuwk  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(389)

我是javascript新手，所以请记住这一点。。。我正在努力自学。我正在使用自定义汇率的货币转换器-无API。
我已经设法找到了实际转换的解决方案，尽管它只适用于第一次输出。例如，如果我想把10欧元兑换成英镑，它就行了。当我想将这10欧元兑换成清单中的任何其他货币时，问题就开始了，例如美元。您可能会注意到，列表中的第一种输出货币是英镑。我的转换只适用于那个。它不适用于任何其他货币-因此，如果我想从欧元转换为加元，它就不起作用。我想能够从任何货币转换为下拉菜单中可用的任何货币。
我做错了什么？
这是我的html/引导程序：

function Currency() {
  y = document.getElementById("converter").value;
  return y;
}

function Calculate() {
  y = Currency();

  x = document.getElementById("value1").value;

  if (x == "") {
    document.getElementById("value2").value = "";
  } else {
    switch (y) {
      case "EUR":
        document.getElementById("value2").value = x * 1;
        break;

      case "CAD":
        document.getElementById("value2").value = x * 3;
        break;

      case "CHF":
        document.getElementById("value2").value = x * 4;
        break;

      case "GBP":
        document.getElementById("value2").value = x * 5;
        break;

      case "USD":
        document.getElementById("value2").value = x * 6;
        break;
    }
  }
}
<div class="container">

<h1>Currency Converter</h1>

<div class="row">
  <div class="col-6 col-md-2 mb-4">
    <input type="number" oninput="Calculate()" class="form-control" id="value1">
  </div>

  <div class="col-6 col-md-2 mb-4">
    <select onchange="Currency(); Calculate()" class="form-select" id="converter">
      <option value="EUR">EUR</option>
      <option value="CAD">CAD</option>
      <option value="CHF">CHF</option>
      <option value="GBP">GBP</option>
      <option value="USD">USD</option>
    </select>
  </div>
</div>

<div class="row row-two">
  <div class="col-6 col-md-2 mb-4">
    <input type="number" class="form-control" id="value2">
  </div>

  <div class="col-6 col-md-2 mb-4">
    <select onchange="Currency(); Calculate()" class="form-select" id="converter">
      <option value="GBP">GBP</option>
      <option value="CAD">CAD</option>
      <option value="CHF">CHF</option>
      <option value="EUR">EUR</option>
      <option value="USD">USD</option>
    </select>
  </div>
</div>

我真的很感谢你在这件事上的帮助-非常感谢！

JavaScriptConvertersCurrency

2条答案

按热度按时间
xmjla07d

xmjla07d1#

首先，您需要了解html和js是如何相互连接的。所有html ID必须是唯一的。这是你用过的 id="converter" 两次，这违反了规定。我必须在单个页面中是唯一的，因此只能有一个id为的元素 converter . 让我们先重写html。

<div class="container">
  <h1>Currency Converter</h1>

  <div class="row">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" oninput="Calculate()" class="form-control" id="value1">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="converter">
        <option value="EUR">EUR</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="GBP">GBP</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>

  <div class="row row-two">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" class="form-control" id="value2">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="converter2">
        <option value="GBP">GBP</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>
</div>

现在来看js部分。不先声明变量就抛出变量不是最佳做法。
坏习惯：

x = 10;
console.log(x)

良好做法：

const x = 10;
let y = 5;

在javascript中，可以使用 var , let ，及 const . 使用 const 当声明为最终声明且值不会更新时。如果您认为将来必须更改变量的值，请使用 let 而不是 const .
现在，让我们关注这个问题。为了开发货币转换器，我们需要检索输入值（1、2、3等）、输入货币（即欧元）和输出货币（英镑）。我们可以使用 document.getElementById 为此。

function Calculate() {
    const input_currency = document.getElementById("converter").value;
  const output_currency = document.getElementById("converter2").value;

  const  inputElement = document.getElementById("value1");
  const  outputElement = document.getElementById("value2");

  const input = parseFloat(inputElement.value)
  let output = "";

}

在这里 input_currency 将是将值转换为的货币 output_currency . inputElement 是第一个文本字段元素，并且 outputElement 是我们将在其上推送计算输出的文本字段。
请注意，我们使用了一个函数名 parseFloat . parseFloat 将任何字符串转换为浮点数。默认情况下，我们从文本字段中获取的值是字符串，但由于我们计划执行数学运算，所以需要将它们转换为数字。

// output 4.5 as a number
console.log( parseFloat("4.5") )

现在让我们应用一些条件，计算我们的值并将其存储在 output 变量

function Calculate() {
    const input_currency = document.getElementById("converter").value;
  const output_currency = document.getElementById("converter2").value;

  const  inputElement = document.getElementById("value1");
  const  outputElement = document.getElementById("value2");

  const input = parseFloat(inputElement.value)
  let output = "";

  switch (input_currency){
    case "EUR":

      if (output_currency == "GBP"){

        // EUR to GBP
        output = input * 0.86

      } else if (output_currency == "CAD"){

        // EUR to CAD
        output = input * 1.49

      } 
      ///... rest of the conversion

    break;

    // .... rest of the cases
  }

  outputElement.value = output;

}

全部加在一起。

function Calculate() {
    const input_currency = document.getElementById("converter").value;
  const output_currency = document.getElementById("converter2").value;

  const  inputElement = document.getElementById("value1");
  const  outputElement = document.getElementById("value2");

  const input = parseFloat(inputElement.value)
  let output = "";

  switch (input_currency){
    case "EUR":

      if (output_currency == "GBP"){

        // EUR to GBP
        output = input * 0.86

      } else if (output_currency == "CAD"){

        // EUR to CAD
        output = input * 1.49

      } 
      ///... rest of the conversion

    break;

    // .... rest of the cases
  }

  outputElement.value = output;

}
<div class="container">
  <h1>Currency Converter</h1>

  <div class="row">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" oninput="Calculate()" class="form-control" id="value1">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="converter">
        <option value="EUR">EUR</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="GBP">GBP</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>

  <div class="row row-two">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" class="form-control" id="value2">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="converter2">
        <option value="GBP">GBP</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>
</div>
赞(0）分享  回复(0）举报  2021-09-13
x6yk4ghg

x6yk4ghg2#

主要问题是重复的ID。您应该更改的两个示例 convertor 到 currencyFrom 及 currencyTo . 这将让您识别正确的下拉列表。

function Currency() {
  y = document.getElementById("currencyTo").value;
  return y;
}

function Calculate() {
  var currencyTo = Currency();

  var fromValue = document.getElementById("value1").value;
  var value2 = document.getElementById("value2");

  if (value1 == "") {
    value2.value = "";
    return;
  }

  switch (y) {
    case "EUR":
      value2.value = fromValue * 1;
      break;

    case "CAD":
      value2.value = fromValue * 3;
      break;

    case "CHF":
      value2.value = fromValue * 4;
      break;

    case "GBP":
      value2.value = fromValue * 5;
      break;

    case "USD":
      value2.value = fromValue * 6;
      break;
  }
}
<div class="container">

  <h1>Currency Converter</h1>

  <div class="row">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" oninput="Calculate()" class="form-control" id="value1">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="currencyFrom">
        <option value="EUR">EUR</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="GBP">GBP</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>

  <div class="row row-two">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" class="form-control" id="value2">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="currencyTo">
        <option value="GBP">GBP</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>

这将正确地将值从 value1 到 value2 使用适当的乘数。
不幸的是，要进行正确的转换，您需要同时识别要转换的货币和要转换的货币。这需要在每种货币组合之间有一个适当的Map。
最简单的方法是将所有输入货币转换为特定货币，然后将其转换为目标货币：

const eurCurrencyMap = {
  EUR: 1,
  CAD: 3,
  CHF: 4,
  GBP: 5,
  USD: 6
};

function Calculate() {

  var currencyFrom = document.getElementById('currencyFrom').value;
  var currencyTo = document.getElementById('currencyTo').value;
  var fromValue = Number.parseFloat(document.getElementById("value1").value);
  var value2 = document.getElementById("value2");

  // check for empty input
  if (typeof(fromValue) !== "number"){
    value2.value = "";
    return;
  }

  // Convert value to Euros
  var inEuros = fromValue / eurCurrencyMap[currencyFrom];

  // Convert to target currency
  value2.value = inEuros * eurCurrencyMap[currencyTo];
}
<div class="container">

  <h1>Currency Converter</h1>

  <div class="row">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" oninput="Calculate()" class="form-control" id="value1">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="currencyFrom">
        <option value="EUR">EUR</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="GBP">GBP</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>

  <div class="row row-two">
    <div class="col-6 col-md-2 mb-4">
      <input type="number" class="form-control" id="value2">
    </div>

    <div class="col-6 col-md-2 mb-4">
      <select onchange="Calculate()" class="form-select" id="currencyTo">
        <option value="GBP">GBP</option>
        <option value="CAD">CAD</option>
        <option value="CHF">CHF</option>
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
      </select>
    </div>
  </div>
赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com