货币转换器 - JavaScript答案

【问题标题】：Currency Converter - JavaScript货币转换器 - JavaScript
【发布时间】：2021-03-09 13:32:24
【问题描述】：

我正在尝试制作货币转换器，只是为了好玩。仅从比索（阿根廷）到美元。对我来说，问题出在 JavaScript 中。我正在尝试使用一个选择，用户可以在其中决定是从美元转换为比索，还是从比索转换为美元。因此，如果用户选择美元兑比索，则操作是将用户输入的值乘以汇率，如果选择比索兑美元，则必须除以。

问题是，我无法从选择中获取值。或者我不知道该怎么做。代码如下：

var opciones = document.getElementById('selector');
var dolarapeso = document.getElementsByTagName('option').value;
var pesodolar = document.getElementsByTagName('option').value;

function convertir() {
  var A = document.getElementById('cantidad').value;
  var B = [145, 157.7, 157.9, 90.2];
  var C = [];

  C[0] = ["0"];
  C[1] = ["0"];
  C[2] = ["0"];
  C[3] = ["0"];

  if (dolarpeso === "1") {
    C = B.map(B => A * B);

    document.getElementById('a').innerHTML = C[0];
    document.getElementById('b').innerHTML = C[1];
    document.getElementById('c').innerHTML = C[2];
    document.getElementById('d').innerHTML = C[3];
  } else if (pesodolar === "2") {
    C = B.map(B => A / B);

    document.getElementById('a').innerHTML = C[0];
    document.getElementById('b').innerHTML = C[1];
    document.getElementById('c').innerHTML = C[2];
    document.getElementById('d').innerHTML = C[3];
  }
}

body {
  background-color: #ffe3de;
  height: 1024px;
}

main {
  width: 1024px;
  margin-right: auto;
  margin-left: auto;
}

header {
  width: 1024px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 25px;
}

footer {
  width: 1024px;
  height: 350px;
  margin-right: auto;
  margin-left: auto;
}

h1 {
  font-family: Barlow;
  font-weight: 500;
}

h3 {
  font-family: Barlow;
}

h4 {
  font-family: Barlow;
  font-style: italic;
}

p {
  font-family: IBM Plex Sans;
}

#info {
  width: 90%;
  height: 300px;
  background-color: #03506f;
  border-radius: 4px;
  padding: 4px;
  margin-bottom: 20px;
  color: white;
  text-align: center;
}

#tipos {
  margin-left: auto;
  margin-right: auto;
  height: 150px;
  width: 30%;
  background-color: #dddddd;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}

#blu {
  color: blue;
}

#mayorista {
  color: #556b2f;
}

#tarjeta {
  color: #e6a80e;
}

#Oficial {
  color: #2aae2a;
}

#areadecalculo {
  width: 90%;
  height: 500px;
  background-color: #a3ddcb;
  border-radius: 5px;
  margin-bottom: 25px;
  margin-top: 25px;
}

#cant {
  margin-left: 60px;
  font-size: 25px;
  font-weight: bold;
  color: white;
  font-family: Barlow;
}

#cantidad {
  width: 30%;
  height: 28px;
  margin-left: 25px;
  margin-top: 15px;
  border-radius: 4px;
  background-color: #ffe3de;
}

#selector {
  width: 30%;
  height: 28px;
  margin-left: 5px;
  border-radius: 4px;
  background-color: #ffe3de;
}

#convert {
  margin-left: 400px;
  font-size: 25px;
  color: white;
  font-weight: bold;
}

#conversor {
  display: block;
  margin-top: 20px;
  margin-left: 450px;
  height: 30px;
  width: 10%;
  border-radius: 4px;
  font-family: IBM Plex Sans;
  background-color: #0a043c;
  color: white;
}

#resultado {
  width: 80%;
  height: 150px;
  margin-top: 35px;
  margin-left: 80px;
  border-radius: 4px;
  background-color: #ffe3de;
}

#display {
  margin-top: 50px;
  margin-right: 30px;
}

.indicadores {
  margin-right: 10px;
  margin-left: 10px;
  line-height: 150px;
  font-family: Barlow;
}

#a {
  margin-left: 5px;
  color: blue;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#b {
  margin-left: 5px;
  color: #556b2f;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#c {
  margin-left: 5px;
  color: #e6a80e;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#d {
  color: #2aae2a;
  font-size: 18px;
  font-style: italic;
  font-weight: bold;
}

#powered-footer {
  float: left;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Conversor de Monedas</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,500;1,100&family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <h1 id="titulo">Conversor de Moneda</h1>
    <p id="powered"> Powered by CafeEnJarritoWeb</p>
    <img id="powered" src="" alt="" id="logo">
  </header>
  <main>
    <div id="info">
      <h3>¡Averigua la cotización de todos los tipos de dólares al segundo!</h3>
      <p>Con nuestro conversor de moneda para la Argentina, podes convertir el monto que necesites y te haremos la conversión a todos los diferentes tipos de Dolar vigentes en nuestro país.</p>
      <div id="tipos">
        <h4 id="blu">Dólar Blu</h4>
        <h4 id="mayorista">Dólar Mayorista</h4>
        <h4 id="tarjeta">Dólar Tarjeta</h4>
        <h4 id="Oficial">Dólar Oficial</h4>
      </div>
    </div>
    <div id="areadecalculo">
      <span id="cant">Cantidad:</span><input id="cantidad" type="number" name="cantidad" value="" placeholder="Indica la cantidad de Dolares a convertir a Pesos">
      <select id="selector" class="seleccionador" name="monedas">
        <option value="1">de Dólares a Pesos</option>
        <option value="2"> de Pesos a Dólares</option>
      </select>
      <button type="button" name="conversor" id="conversor" onclick="convertir()">¡Convertir!</button>
      <div id="resultado">
        <div id="display">
          <span class="indicadores">Dolar Blu: <span id="a"> </span></span>
          <span class="indicadores">Dólar Mayorista:<span id="b"> </span></span>
          <span class="indicadores">Dólar Tarjeta:<span id="c"></span></span>
          <span class="indicadores">Dólar Oficial:<span id="d"></span></span>
        </div>
      </div>
    </div>
  </main>
  <footer>
    <p id="powered-footer"> Powered by CafeEnJarritoWeb</p>
    <img id="powered-footer" src="" alt="" id="logo">
  </footer>
  <script type="text/javascript" src="js/conversor.js"></script>
</body>

</html>

【问题讨论】：

嘿，有人已经问过这个stackoverflow.com/questions/19774387/… 它回答了你的问题吗？
这能回答你的问题吗？ HTML/Javascript Currency converter
如果您向我们展示您尝试过的内容或可能出现的问题，如果您提供英文文本，将会很有帮助
这不是minimal reproducible example
What do querySelectorAll and getElementsBy* methods return?

标签： javascript html css

【解决方案1】：

您在一个地方调用变量dolarapeso，在另一个地方调用dolarpeso：

var dolarapeso = document.getElementsByTagName('option').value

if (dolarpeso === "1") {

但主要问题是您错误地获取了下拉列表的值。应该是：

var val = document.getElementById('selector').value;

然后你可以说：

if ( val === "1" ) {
  // Dollars to pesos
} else if ( val === "2" ) {
  // Pesos to dollars
}

【讨论】：

【解决方案2】：

我已经查看了 JS 代码，这是我的建议，应该不会出错。我希望它可以帮助并解决您的问题。

let opciones   = document.getElementById("selector"),
    dolarapeso = document.getElementsByTagName("option").value,
    pesodolar  = document.getElementsByTagName("option").value;

function convertir() {

    let A = document.getElementById("cantidad").value,
        B = [145, 157.7, 157.9, 90.2],
        C = [],
        monedas = document.getElementById("selector").value;

        C [0] = ["0"];
        C [1] = ["0"];
        C [2] = ["0"];
        C [3] = ["0"];

    if(monedas === "1") {
        C = B.map(B => A * B);

        document.getElementById("a").innerHTML = C [0];
        document.getElementById("b").innerHTML = C [1];
        document.getElementById("c").innerHTML = C [2];
        document.getElementById("d").innerHTML = C [3];
    } else if(monedas === "2") {
        C = B.map(B => A / B);

        document.getElementById("a").innerHTML = C [0];
        document.getElementById("b").innerHTML = C [1];
        document.getElementById("c").innerHTML = C [2];
        document.getElementById("d").innerHTML = C [3];
    }
}

【讨论】：

MCrui 谢谢你的回答，它有效，你能解释一下你对我的代码所做的更改吗？我想知道我做错了什么
@MatuteVIP 主要变化是您调用了未定义的dolarpeso 和pesodolar，所以我添加了monedas = document.getElementById("selector").value; 抽象变量。另一个问题是你有一个额外的右括号，它抛出了一个错误。其他东西只是遵循 JS 代码最佳实践的“化妆品”：将 var 更改为 let，将所有单引号更改为双引号，使用 ; 封闭行——如果可行，您可能会接受答案，因为它就是人们在这里做。谢谢。
太棒了！多谢！我还在学习，这很有帮助

【解决方案3】：

您可以像这样获取选择器的值：

opciones.value

这将从所选选项中获取 value 属性。

【讨论】：