0

me estoy iniciando en la programación de javascrip y me han dado un ejercicio de conversión en este caso es solo usando 2 opciones de cambio, y la idea es que se pueda hacer a la viceversa. He recorrido todo el stack tanto en español como inglés para ver si habia una pregunta similar pero los ejemplos que habian no me han servido o no he sabido como aplicarlo.

Errores que de los que estoy conciente: llamado de los documents y las propiedades de innerHTLM, el onclick de button tambien me da null.

Hasta ahora esto es lo que tengo:

Html

<div class="container">
        <header>Convertidor</header>
        <form action="#">
            <div class="amount-box">
                <p>Ingresar monto</p>
                <input type="text" value="1" id="amount">
            </div>
            <div class="options">
                <!--Desde-->
                <div class="from-box">
                    <p>De</p>
                    <div class="select-box">
                        <select id="from" onchange="convert()">
                            <option value="1">USD</option>
                            <option value="2">ARS</option>
                        </select>
                    </div>
                </div>
                <div class="img">
                    <i class="fa-solid fa-arrow-right"></i>
                </div>
                <!--a-->
                <div class="to-box">
                    <p>A</p>
                    <div class="select-box">
                        <select id="to" onchange="convert()">
                            <option value="2">ARS</option>
                            <option value="1">USD</option>
                        </select>
                    </div>
                </div>
                <!---->
            </div>
            <span class="exc-ra"></span>
            <button onclick="convert()">Convertir</button>
        </form>
    </div>

JS

function convert() {
    let amount = parseInt(document.getElementById("amount")).value;

    let from = document.getElementById("from").value;
    let to = document.getElementById("to").value;

    const usd = 1;
    const ars = 300;
    let result = 0;

    if (from === 1 && to === 2) {
        result = amount * usd; 
    } else if (from === 2 && to === 1) {
        result = amount / ars;
    } else {
        result = amount;
    }
    document.getElementById("exc-ra").innerHTML = '$' + result;
}
3
  • 1
    Hola Melisa, fijate que en let amount = parseInt( document.getElementById( "amount" )).value; el paréntesis debe ir después del value osea let amount = parseInt( document.getElementById( "amount" ).value );, ya que estás parseando lo que devuelve value. el 19 mar. a las 1:53
  • Lo hice, y tambien corregí id de span que no lo tenía, ahora me muestra el valor, pero no aplica la funcion, osea no me da la conversion :( el 19 mar. a las 6:48
  • 1
    Hola Melisa, considera revisar por favor Cómo preguntar, saludos.
    – Jorgesys
    el 21 mar. a las 21:46

1 respuesta 1

1

Hice algunos cambios para que funcionara...

function convert() {
      // como te decía en los comentarios, el paréntesis va
      // después de "value", y tambien convertí los retornos 
      // de "to" y "from".  
    let amount = parseInt( document.getElementById( "amount" ).value );

    let from = parseInt( document.getElementById( "from" ).value );
    let to = parseInt( document.getElementById( "to" ).value );

    const ars = 300;
    let result = 0;

    if ( from === 1 && to === 2 ) {
          // acá cambié amount * usd
        result = amount * ars; 
    } 
    else if ( from === 2 && to === 1 ) {
        result = amount / ars;
    } 
    else {
        result = amount;
    }
    document.getElementById( "exc-ra" ).innerHTML = '$' + result;
}
<div class="container">
    <header> Convertidor </header>
    <form action="#">
        <div class="amount-box">
            <p> Ingresar monto </p>
            <input type="text" value="1" id="amount">
        </div>
        <div class="options">
            <!--Desde-->
            <div class="from-box">
                <p> De </p>
                <div class="select-box">
                    <select id="from" onchange="convert()">
                        <option value="1"> USD </option>
                        <option value="2"> ARS </option>
                    </select>
                </div>
            </div>
            <div class="img">
                <i class="fa-solid fa-arrow-right"> </i>
            </div>
            <!--a-->
            <div class="to-box">
                <p> A </p>
                <div class="select-box">
                    <select id="to" onchange="convert()">
                        <option value="2"> ARS </option>
                        <option value="1"> USD </option>
                    </select>
                </div>
            </div>
            <!---->
        </div>
            <!-- cambié class="exc-ra" por id="exc-ra" ya que en -->
            <!-- la función "convert", usas "getElementById". -->
        <span id="exc-ra"> </span>

          <!-- agregué el "type", ya que al darle "click", --> 
          <!-- después de un segundo... desaparecia todo!. -->
        <button type="button" onclick="convert()"> Convertir </button>
    </form>
</div>

Con estás mínimas correcciones, el código funciona... el principal problema, era que convertías a entero el contenido de amount y los de from y to no, entonces al comparar con === daba siempre false (=== compara el valor y el tipo), era válido no convertir ninguno o convertir todos y usar ===, o convertir unos si y otros no pero usar == , pero bueno, son cosas que nos pasan a todos, por otro lado, en el if, multiplicabas amount por usd que vale "1"... por lo que la desaparecí.

3
  • Dios, muchisimas gracias por tomarte el tiempo de explicarme! de la forma que lo hiciste ahora entiendo mas los pasos y los eventos. :) el 20 mar. a las 2:42
  • Un placer poder ayudarte!!!. el 20 mar. a las 2:43
  • @MelisaAhumada Recuerda marcar la respuesta como aceptada. Saludos!!
    – Yussef
    el 20 mar. a las 5:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.