2

Es una calculadora con un formularios de tres campos, 2 de texto (para llenar con caracteres númericos) y un "dropdown" o select o menú desplegable que contiene campos de texto.

La formula seria simplificada sería

Resultado = campo de texto1* (campo de texto2 *(0.01+ 0.16 + "X"))

Y allí es donde entran los condicionales porque el valor de esa "X" es un porcentaje llevado a decimal (obviamente) que varia o es determinado en base al valor del "input Type=select" o menú desplegable que son valores de texto.

En fin intenté resolverlo mediante este código pero no me arroja resultado, acá les dejo una muestra

<script>


function a (x,y,z) {

var x = parseFloat(x);
var y = parseFloat(y);

    if (z == "Telefonos") {return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20)));
    }else if (z == "Televisores") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20)))); 
    } else if (z == "Equipos de computacion") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.16)))); 
    } else if (z == "Camara de video") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.05)))); 
    } else if (z == "Camara fotografica") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.10)))); 
    } else if (z == "Electrodomesticos") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20)))); 
    } else if (z == "Ropa-Calzado") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20)))); 
    } else if (z == "Perfumes") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20)))); 
    } else if (z == "Libros") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0)))); 
    } else if (z == "Articulos deportivos") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20)))); 
    } else if (z == "Vitaminas") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.05)))); 
    } else if (z == "Juguetes") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20)))); 
    } else if (z == "CDs.BlueRays") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0,15)))); 
    } else if (z == "Equipos de Sonido") {(return ( (x)*(( (y)*0.01)+( (y)*0.16)+( (y)*0.20))));  
        }else {
        alert("Ingresa alg&uacute;n valor"); 
}


</script>

<div class="form-mini-container">


            <h1>Mini Form</h1>

            <form class="form-mini" >

                <div class="form-row">
                    <input type="text" name="tasa" id="demo" >
                </div>

                <div class="form-row">
                    <input type="text" name="costo" placeholder="Your Email">
                </div>

                <div class="form-row">
                    <label>
                        <select name="tag" >
                            <option>Telefonos</option>
                            <option>Equipos de computacion</option>
                            <option>Televisores</option>
                            <option>Equipos de Sonido</option>
                            <option>Camara de video</option>
                            <option>Camara fotografica</option>
                            <option>Electrodomesticos</option>
                            <option>Ropa-Calzado</option>
                            <option>Perfumes</option>
                            <option>Libros</option>
                            <option>Articulos deportivos</option>
                            <option>Vitaminas</option>
                            <option>Juguetes</option>
                            <option>CDs-BlueRays</option>
                        </select>
                    </label>
                </div>



                <div class="form-row">


                      <input type="text" name="result" >



                                    </div>

                <div class="form-row form-last-row">
                    <button type="submit" onclick="document.forms[0].result.value= a (document.forms[0].tasa.value,costo.value,tag.value);">Submit Form</button>
                </div>

            </form>
        </div>
4
  • al momento de usar: if (z = "Telefonos") estás haciendo una asignanción a "z", cosa que no puedes en una condicional. debería ser (z == "Telefonos"), otra cosa parsea tus valores x,y,z antes de que entren en las condiciones y para tantas condicionales mejor usa una estructura switch. Commented el 4 jul. 2019 a las 23:50
  • Hice las modificaciones (lo actualicé en el código de arriba) pero no me funciona todavia, tambien intenté una versión con switch pero no me arroja ningún resultado
    – Pablo Rojo
    Commented el 5 jul. 2019 a las 4:30
  • el parseo de tus variables deben ser dentro de la función y no fuera. Commented el 5 jul. 2019 a las 4:42
  • cierto ese error lo cometí copiando y pegando acá pero sigue igual sin funcionar
    – Pablo Rojo
    Commented el 5 jul. 2019 a las 14:51

2 respuestas 2

2

solución:

const inputTasa = document.getElementById('input-tasa')
const inputCosto = document.getElementById('input-costo')
const selectOption = document.getElementById('select-option')
const labelResult = document.getElementById('label-result')

function calcular() {
  let x = parseFloat(inputTasa.value)
  let y = parseFloat(inputCosto.value)

  let result = null
  let selectOptionValue = selectOption.value

  if (selectOptionValue == "Telefonos") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else if (selectOptionValue == "Televisores") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else if (selectOptionValue == "Equipos de computacion") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.16)));
  } else if (selectOptionValue == "Camara de video") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.05)));
  } else if (selectOptionValue == "Camara fotografica") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.10)));
  } else if (selectOptionValue == "Electrodomesticos") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else if (selectOptionValue == "Ropa-Calzado") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else if (selectOptionValue == "Perfumes") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else if (selectOptionValue == "Libros") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0)));
  } else if (selectOptionValue == "Articulos deportivos") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else if (selectOptionValue == "Vitaminas") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.05)));
  } else if (selectOptionValue == "Juguetes") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else if (selectOptionValue == "CDs.BlueRays") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0, 15)));
  } else if (selectOptionValue == "Equipos de Sonido") {
    result = ((x) * (((y) * 0.01) + ((y) * 0.16) + ((y) * 0.20)));
  } else {
    // alert("Ingresa alg&uacute;n valor");
  }
  labelResult.innerHTML = result || ''
}
<div class="form-mini-container">
    <h1>Mini Form</h1>
    <div class="form-mini">
        <div class="form-row">
            <input id="input-tasa" type="text" name="tasa">
        </div>
        <div class="form-row">
            <input id="input-costo" type="text" name="costo" placeholder="Your Email">
        </div>
        <div class="form-row">
            <label>
                <select id="select-option" name="tag">
                    <option>Telefonos</option>
                    <option>Equipos de computacion</option>
                    <option>Televisores</option>
                    <option>Equipos de Sonido</option>
                    <option>Camara de video</option>
                    <option>Camara fotografica</option>
                    <option>Electrodomesticos</option>
                    <option>Ropa-Calzado</option>
                    <option>Perfumes</option>
                    <option>Libros</option>
                    <option>Articulos deportivos</option>
                    <option>Vitaminas</option>
                    <option>Juguetes</option>
                    <option>CDs-BlueRays</option>
                </select>
            </label>
        </div>
        <div class="form-row">
            <label id="label-result"></label>
        </div>
        <div class="form-row form-last-row">
            <button onclick="calcular()">Calcular</button>
        </div>
    </div>
</div>

He refactorizado el html y script para una mejor legibilidad.

Recomendaciones:

  • No necesitas un form para hacer el calculo que pretendes, ya que no dependes de un servidor para dicho calculo porque lo estás haciendo en JS.

  • No se recomienda poner demasiada lógica o datos en el llamado de eventos desde las tags HTML, en tu caso le ponías a tu función a(...) muchos argumentos.

  • El nombre de las funciones deben expresar la funcionalidad que resuelven, llamar a una función "a(...)", no expresa nada.

  • En tu estructura if - else if, al ser tan extensa hace poco legible la implementación, cámbialo por una estructura switch.

2
  • Funciona perfectamente, tomaré nota de tus recomendaciones pero el valor tasa en el original si es un valor dinamico y lo extraigo de un JSON de una URL alojada en un servidor de terceros, solo que omití el código porque distraia en solución del problema
    – Pablo Rojo
    Commented el 5 jul. 2019 a las 17:03
  • Espero entonces puedas abstraer la lógica e implementarlo de acuerdo a tus necesidades. Commented el 5 jul. 2019 a las 17:07
1

Debes usar el doble = para comparar valores dentro de los if, en tu codigo usas un solo =, ese es para asignar un valor,

z = 'a' // Se asigna el valor 'a' a la variable z
z == 'a' // Se compara el valor de z con 'a', devuelve true si es verdadero, false si es falso

if (z == "Telefonos") // Tus condicionales deben llevar ==
1
  • Lo hice pero me sigue sin dar resultado, (actualicé el código anterior)
    – Pablo Rojo
    Commented el 5 jul. 2019 a las 4:30

Tu Respuesta

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

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