0

Estoy desarrollando un simulador de ganancias de inversión. El objetivo es que el usuario que quiera invertir coloque el dinero que piensa invertir y elija en cuanto tiempo desea hacerlo, si en 3, 12, 18 o 24 meses, con sus correspondientes porcentajes que están determinados en el value="28" de los checkbox.

El problema que no me deja avanzar es que no logro tomar el valor del input y que cuando selecciones un mes me lo multiplique y lo sume.

Ejemplo: Yo quiero invertir u$s1500 a 12 meses. El calculo seria 1500 * 20% = 300, mas el valor inicial: 1500 + 300 = 1800. u$s1800 es el valor que ganaría si invierto mi dinero a 12 meses con una tasa del 20%.

Por tantas veces que lo hice mal, borre y elimine y tuve que rehacer todo varias veces y este es el resultado. Digo esto porque falta un parte que corresponde al envió de esta info por email con phpmailer, pero eso lo haré después.

Gracias!

function actualizarValor(estaChequeado, valor) {

var suma_actual = 0;
var campo_resultado = document.getElementById('txtValor');
valor = parseInt(valor);

// Obtener la suma que pueda tener el campo 'txtValor'.
try {
  if (campo_resultado != null) {
    if (isNaN(campo_resultado.value)) {
    campo_resultado.value = 0;
    }
    suma_actual = parseInt(campo_resultado.value);
  }
} catch (ex) {
  alert('No existe el campo de la suma.');
}

// Determinar que: si el check está seleccionado entonces, agregue el valor a la variable "suma_actual";
// de lo contrario, le resta el valor del check a "suma_actual".

if (estaChequeado == true) {
  suma_actual = suma_actual * valor;
} else {
  suma_actual = suma_actual / valor;
}

// Colocar el resultado de las operaciones anteriores de vuelta al campo "txtValor".
campo_resultado.value = suma_actual;
}
<form action="" method="post">
<p>
Valor <br>
$<input type="text" name="valorBase">
</p>

<p>
Meses <br>
3 <input type="checkbox" name="mes" value="12" onclick="actualizarValor(this.checked, this.value);">

6 <input type="checkbox" name="mes" value="16" onclick="actualizarValor(this.checked, this.value);">

12 <input type="checkbox" name="mes" value="20" onclick="actualizarValor(this.checked, this.value);">

18 <input type="checkbox" name="mes" value="24" onclick="actualizarValor(this.checked, this.value);">

24 <input type="checkbox" name="mes" value="28" onclick="actualizarValor(this.checked, this.value);">
</p>

<p>
Resultado de la simulaci&oacute;n <br>
<input type="text" name="total" readonly id="txtValor" value="1" aria-describedby="addon-wrapping">
</p>

<p>
<input type="submit" name="add" value="Enviar">
<input type="reset" name="add" value="Reset">
</p>

</form>

4
  • No se entiende tu error, ¿serías tan amable de explicarlo de nuevo?
    – user128299
    Commented el 3 abr. 2020 a las 3:01
  • tienes que obtener el valor del input valorBase y multiplicar ese valor por el check seleccionado? Commented el 3 abr. 2020 a las 3:01
  • @BetaM ahi lo modifique y puse un ejemplo de como debería ser y no logro los resultados
    – user101604
    Commented el 3 abr. 2020 a las 3:28
  • @VickMuñoz claro y sumar ese porcentaje para tener un valor final
    – user101604
    Commented el 3 abr. 2020 a las 3:28

2 respuestas 2

2

Con checkbox va a ser muy complicado lograrlo, lo más adecuado es usar radios, porque solo uno puede estar marcado:

function actualizarValor() {
  var campo_resultado = document.getElementById('txtValor');
  var valor = parseInt(document.getElementsByName('valorBase')[0].value);
  // Aplicar valor inicial
  var suma_actual = valor;
  // Obtener valor del radio
  var radio = document.querySelector('input[name="mes"]:checked');
  // Solo si alguna opción está seleccionada
  if(radio) {
      var porcentaje = radio.value;
      suma_actual += valor * parseInt(porcentaje) / 100;
  }
  campo_resultado.value = suma_actual;
}
<form action="" method="post">
<p>
Valor <br>
$<input type="text" name="valorBase" onkeyup="actualizarValor();">
</p>

<p>
Meses <br>
3 <input type="radio" name="mes" value="12" onclick="actualizarValor();">
6 <input type="radio" name="mes" value="16" onclick="actualizarValor();">
12 <input type="radio" name="mes" value="20" onclick="actualizarValor();">
18 <input type="radio" name="mes" value="24" onclick="actualizarValor();">
24 <input type="radio" name="mes" value="28" onclick="actualizarValor();">
</p>

<p>
Resultado de la simulaci&oacute;n <br>
<input type="text" name="total" readonly id="txtValor" value="" aria-describedby="addon-wrapping">
</p>

<p>
<input type="submit" name="add" value="Enviar">
<input type="reset" name="add" value="Reset">
</p>

</form>

La función actualizarValor() no necesita parámetros, todo se toma directo del HTML y, de hecho, queda mejor, porque puedes ir actualizando conforme llenas el campo.

1
  • Entiendo, y también con los checkbox me di cuenta de que pueden elegir varios valores a la vez e iba a ser un problema mas. Tampoco hice anteriormente una regla de 3, esto me hizo mal. Muchas Gracias Triby.
    – user101604
    Commented el 3 abr. 2020 a las 4:09
1

Tu código actual me parece demasiado complejo y rebuscado por lo que propongo lo siguiente:

  • Usa los radio buttons que son aquellos que nos servirán para solo seleccionar un valor, ya que por cada cambio de meses que haga el usuario solo debería mantenerse uno con el foco
  • Dales a todos los radio button la misma clase, lo cual nos servirá para poder recuperarlos e iterar sobre ellos
  • Le damos a cada radio button un valor numérico acorde a la cantidad de meses en el atributo value
  • Como la clase nos permite recuperarlos todos a la vez entonces los iteramos por medio de un foreach
  • Con un if else verificamos solo si el valor de la invsersion inicial esta vacio y en caso afirmativo no procede la operación y en caso contrario si se calcula
  • Además dado que no mandas esto al backend no veo la necesidad de contenerlo en un formulario

EJEMPLO

    Valor: $ <input id="inversionInicial" type="text" />
    <br>
    Meses:
    <br>
    3<input  class="tiempoInversion" name="tiempoInversion" type="radio" value="12">
    6<input  class="tiempoInversion" name="tiempoInversion" type="radio" value="16">
    12<input class="tiempoInversion" name="tiempoInversion" type="radio" value="20">
    18<input class="tiempoInversion" name="tiempoInversion" type="radio" value="24">
    24<input class="tiempoInversion" name="tiempoInversion" type="radio" value="28">
    <br>
    Resultado de la simulación
    <br>
    <input type="text" id="resultadoSimulacion" />
    <script>
    	let inversionInicial = document.getElementById("inversionInicial")
    	let tiempoInversion  = document.querySelectorAll(".tiempoInversion")
    	let resultadoSimulacion = document.getElementById("resultadoSimulacion")
    
    	tiempoInversion.forEach((elemento) => {
    		elemento.addEventListener("click", () => {
    			if (inversionInicial.value == "") {
    				console.log("Falta el valor de tu inversión")
    			} else {
                    let calculoUno   = inversionInicial.value * elemento.value / 100
			        let calculoFinal = Number(inversionInicial.value) + Number(calculoUno)
			        resultadoSimulacion.value = calculoFinal
    			}
    		})
    	})
    </script>

1
  • Gracias BetaM. Al final no lo van a usar, pero ya tengo otro ejemplo.
    – user101604
    Commented el 7 abr. 2020 a las 1:49

Tu Respuesta

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