0

Hago un poco de sintaxis, tengo un select que dependiendo qué tipo elija, tiene un coste base.

Luego viene donde tengo el error, dependiendo de los meses que quiera el cliente tener la página lista, se reduce un x por ciento -> El minimo es 1 mes, el max 4(para aplicar el porcentaje), el porcentaje mín es 5% y el max 20%.

Mi problema sería el suguiente, cuando elijo el tipo de página y los meses se me aplica vez la primera vez, pero si sigo cambiando los meses se me aplica el porcentaje sobre el numero ya rebajado en vez del base.

Una solución sería de alguna manera bloquear el if y que cuando se ponga un numero ya no se vuelva a cambiar ( no me agrada )

Otra sería que se cambiara todo el rato sobre el precio base y no sobre el ya rebajado si quiero probar cuanto costoría en función de los meses que ponga.

Llevo un buen rato dandole vueltas y no se me ocurre como, a ver si algien puede ayudarme.

Este sería mi código js

tiempo = document.getElementById("meses");
tiempo.addEventListener("change", (e) => {
    /* Señalamos el tipo de porcentaje a disminuir según los meses elegidos -> max 4, max 20% */
    if(tiempo.value == 1){
        resultadoPresupuesto -= (0.05 * resultadoPresupuesto);
        cuenta.value = resultadoPresupuesto;
        console.log(resultadoPresupuesto);
        console.log(cuenta.value);
    } else if(tiempo.value == 2){
        resultadoPresupuesto -= (0.1 * resultadoPresupuesto);
        cuenta.value = resultadoPresupuesto;
        }else if(tiempo.value == 3){
            resultadoPresupuesto -= (0.15 * resultadoPresupuesto);
            cuenta.value = resultadoPresupuesto;
            }else if(tiempo.value == 4){
                resultadoPresupuesto -= (0.2 * resultadoPresupuesto);
                cuenta.value = resultadoPresupuesto;
            }else {null}
        return resultadoPresupuesto;

});

Dejo una imagen por si lo ven más claro

introducir la descripción de la imagen aquí

1
  • 1
    Yo trabajaría con algo así como un array o un objeto donde estén indicados los descuentos a aplicar, así te quitas de encima todos los if aplicando el descuento correspondiente tomándolo del objeto. El array sería algo así más o menos: {1:"0.05", 2:"0.1", 3:"0.15", 4:"0.2"} así, según el value del elemento usarías el objeto para saber qué descuento hay que aplicar.
    – A. Cedano
    Commented el 7 jul. 2020 a las 19:32

2 respuestas 2

0

veo que calculas los porcentajes y aplicas sobre la misma variable en lugar de colocar ya el cálculo en su sitio una vez realizado. Creo que una alternativa sería:

tiempo = document.getElementById("meses");
tiempo.addEventListener("change", (e) => {
/* Señalamos el tipo de porcentaje a disminuir según los meses elegidos -> max 4, max 20% */
float dto = 1; /* Si vale 1 no aplica descuentos */
if(tiempo.value == 1){
    dto = 0.95;    
} else if(tiempo.value == 2){
    dto = 0.90;
}else if(tiempo.value == 3){
    dto = 0.85;
}else if(tiempo.value == 4){
     dto = 0.80;
}else {null}

    /* Aquí aplica el descuento sin alterar el valor de
       resultadoPresupuesto
    */          
    cuenta.value = resultadoPresupuesto * dto;

    console.log(resultadoPresupuesto);  /* presupuesto sin descuentos */
    console.log(cuenta.value);          /* presupuesto con descuento aplicado */
    return resultadoPresupuesto;

});

2
  • y no es mejor. dto = 0.05; value = dto * tiempo.value Commented el 7 jul. 2020 a las 18:58
  • Como en su código no calcula el descuento que se aplica, sino el valor ya con el descuento aplicado lo he realizado en esa línea. Como en cuenta.value devolvía el mismo valor que resultadoPresupuesto pues tampoco sé cómo lo persigue el usuario por eso he comentado las líneas para que devuelva o calcule como desee, pero creo que en general se vislumbra la solución. Commented el 7 jul. 2020 a las 19:22
0

En este código se utiliza un objeto (mPercents) que refleja las condiciones definidas en tu negocio en pares clave->valor. De ese modo no hace falta los if y si en un futuro hay otras condiciones, sólo la agregas en ese objeto.

El listener es como lo tenías: escucha los cambios que ocurren en tiempo, busca según el valor qué descuento aplicaría y calcula el precio final.

Todos los demás controles, como que sólo se escriban meses entre 1 y 4 lo dejo a tu cuidado. Como no tengo todo el contexto no establecí controles en ese sentido.

Puedes usar finalPrice donde lo necesites, así como cualquier otra información (el descuento aplicado, el precio de base, etc).

He comentado las cosas novedosas del código, si tienes duda, pregunta en comentarios.

var mPercents = {
  1: "0.05",
  2: "0.1",
  3: "0.15",
  4: "0.2"
};
var tiempo = document.getElementById("meses");
var cuenta = document.getElementById("cuenta");

tiempo.addEventListener("change", (e) => {
  /* Precio base o 0 para evitar NaN */
  var basePrice = parseFloat(cuenta.value) || 0;
  /* Valor a descontar o 0 si no está en el objeto */
  var mDiscount = parseFloat(mPercents[e.target.value]) || 0;
  /* Calculamos precio final */
  var finalPrice = basePrice - (basePrice * mDiscount);
  /* Test */
  console.log(`Precio final ${finalPrice.toFixed(2)} aplicando un ${mDiscount*100}% de descuento sobre ${basePrice.toFixed(2)}`);

});
Precio Base: <input type="number" id="cuenta" placeholder="Escriba precio base" /> <br />
Meses: <input type="number" id="meses" placeholder="Escriba meses" />

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.