Currency Converter - JavaScript

Question

I am trying to make a Currency Converter, just for fun. Only from Peso (Argentina) to US Dollar. The problem for me is in the JavaScript. I am trying to use a select in which the user can decide whether to make the conversion from Dollar to Peso, or from Peso to Dollar. So if the user chooses Dollar to Peso the operation is multiply the value the user inputs to the rate, if it chooses Peso to Dollar it has to divide.

Thing is, I cannot get the value from the select. Or I don't know how to do it. Here is the code:

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>

Hey someone already asked this https://stackoverflow.com/questions/19774387/html-javascript-currency-converter does it answer your question? — Pirogrammer, Mar 09 '21 at 13:35
Does this answer your question? [HTML/Javascript Currency converter](https://stackoverflow.com/questions/19774387/html-javascript-currency-converter) — Pirogrammer, Mar 09 '21 at 13:36
It would be helpful, if you show us what you have tried or what could be wrong and ofc if you provide your text in English — MrJami, Mar 09 '21 at 13:40
[What do querySelectorAll and getElementsBy* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Andreas, Mar 09 '21 at 13:45
I just made this https://stackoverflow.com/a/66548351/295783 — mplungjan, Mar 09 '21 at 16:33

score 1 · Answer 1 · answered Mar 09 '21 at 13:42

You're calling the variable dolarapeso in one place and dolarpeso in another:

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

if (dolarpeso === "1") {

But the main problem is that you're getting the value of the dropdown incorrectly. It should be:

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

You can then say:

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

score 0 · Answer 2 · answered Mar 09 '21 at 13:42

0

You can get the value of your selector like this:

opciones.value

This will get the value property from the selected option.

answered Mar 09 '21 at 13:42

Illusion705

451
3
13

McRui · Accepted Answer · 2021-03-09T14:10:04.480

I've reviewed the JS code and here's my suggestion that should throw no errors. I hope it helps and solves your issue.

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 Thank you for your answer, It worked, could you explain to me the changes you did to my code?? I want to learn what was I doing wrong — Matute VIP, Mar 09 '21 at 20:42
@MatuteVIP the main change was that you were calling `dolarpeso` and `pesodolar` that were not defined, so I added `monedas = document.getElementById("selector").value;` abstracting the variable. Another issue was that you had an extra closing brace that was throwing an error. The other stuff was just 'cosmetic' following JS code best practices: changed `var` to `let`, all single quotes to double quotes, closed lines with `;` — If it works, you may accept the answer, as it's what people do here. Thanks. — McRui, Mar 10 '21 at 01:33
Great! thanks a lot! I am still learning and this is very helpful — Matute VIP, Mar 10 '21 at 20:01

Currency Converter - JavaScript

3 Answers3