0

Tengo tres inputs, al agregar un valor se genera la suma de los tres inputs y luego muestro el resultado, el caso es que la suma debe de tener un valor máximo, de modo que si la suma máxima es de 10 y en los primeros inputs pongo 3 y 5 en la última debería de auto-rellenarse con 2 para que la suma total sea de 10, es para un ejercicio.

Éste es mi código:

function sumar (valor) {
     var total = 0; 
     valor = parseInt(valor); // Convertir el valor a un entero (número).
     total = document.getElementById('spTotal').innerHTML;
     // Aquí valido si hay un valor previo, si no hay datos, le pongo un cero "0".
     total = (total == null || total == undefined || total == "") ? 0 : total;
     /* Esta es la suma. */
     total = (parseInt(total) + parseInt(valor));
     // Colocar el resultado de la suma en el control "span".
     document.getElementById('spTotal').innerHTML = total;
 }
<span>Valor #1</span>
<input type="text" id="txt_campo_1" onchange="sumar(this.value);" />
<br/ >
<span>Valor #2</span>
<input type="text" id="txt_campo_2" onchange="sumar(this.value);" />
<br/ >
<span>Valor #3</span>
<input type="text" id="txt_campo_3" onchange="sumar(this.value);" />
<br/ >
<span>El resultado es: </span> <span id="spTotal"></span>

Pero no se como podría implementar esa función.

1 respuesta 1

0

Hola no estoy seguro si te entendí, pero te hice un ejemplo de más o menos como seria, agregue jquery para que sea mas fácil. (el código tiene comentarios). Aqui no valido si el texto ingresado no es número.

    let ValorMaximo = 10;

//Funcion que se activa cuando el valor de un input cambia
$("input").change(function(){
    
    //Verificar que tengan valor el texto 1 y 2
    if ($("#txt_campo_2").val() == "") {$("#txt_campo_2").val("0")}
    if ($("#txt_campo_1").val() == "") {$("#txt_campo_1").val("0")}

    //Obtener su valor
    let txt1 = parseFloat($("#txt_campo_1").val());
    let txt2 = parseFloat($("#txt_campo_2").val());

    //Si la suma del txt1 y 2 es menor al valor maximo se resta
    if (txt1 + txt2 < ValorMaximo) {
        $("#txt_campo_3").val(ValorMaximo - (txt1 + txt2))
    }else{ 
        $("#txt_campo_3").val("0");
    }

    let txt3 = parseFloat($("#txt_campo_3").val());

    //Sumamos todos los valores y los mostramos
    $("#spTotal").text(txt1 + txt2 + txt3);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<span>Valor #1</span>
    <input type="text" id="txt_campo_1"/>
    <br/ >
    <span>Valor #2</span>
    <input type="text" id="txt_campo_2" />
    <br/ >
    <span>Valor #3</span>
    <input type="text" id="txt_campo_3"/>
    <br/ >
    <span>El resultado es: </span> <span id="spTotal"></span>
</body>
</html>

2
  • Hola, es justo lo que necesito, no habia pensado en usar jquery pero es una solucion para mi asi que me parece perfecto, gracias por tu respuesta! Commented el 19 ago. 2020 a las 22:53
  • De nada :) que bueno que te sirvio.
    – Jorge Luis
    Commented el 19 ago. 2020 a las 22:55

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.