0

Necesito ayuda. En mi programación html tengo 3 cajas, cada caja contiene 3 inputs ocultados con (display "none"), cada input tiene un respectivo botón(button), el cual sirve para mostrar o desplegar ese input oculto. El punto es que quiero que se sumen los últimos input de cada caja, es decir que si la caja una tiene solo un input desplegado, y la segunda caja tiene 2 inputs, y la tercera tiene sus tres inuts desplegados, pues entonces, me sumara el primer input de la caja uno, mas el segundo input de la caja 2, mas el 3 input de la caja 3, lo que quiero es que se sumen los últimos inputs de cada caja, si las 3 cajas tienen sus tres inputs desplegados, pues sumaran el tercer o ultimo input de cada caja. En poquitas y repetitivas palabras pues se sumaran los ultimos input de cada caja, si una caja tiene solo un input desplegado, pues se sumara ese input con el ultimo input de la otra caja. Esto es de urgencia, por favor necesito ayuda, no tendria con que pagarle al que me ayude.

Aquí Anexo mi código para que vean y por favor les ruego me ayuden:

<!DOCTYPE html>
<html>
<head>
    <title>Sumando Cajas</title>
    <script type="text/javascript">
        function apa1() {
            document.getElementById('input1').style.display = "block";
        }
        function apa2() {
            document.getElementById('input2').style.display = "block";
        }
        function apa3() {
            document.getElementById('input3').style.display = "block";
        }
        function apa4() {
            document.getElementById('input4').style.display = "block";
        }
        function apa5() {
            document.getElementById('input5').style.display = "block";
        }
        function apa6() {
            document.getElementById('input6').style.display = "block";
        }
        function apa7() {
            document.getElementById('input7').style.display = "block";
        }
        function apa8() {
            document.getElementById('input8').style.display = "block";
        }
        function apa9() {
            document.getElementById('input9').style.display = "block";
        }
        function apa10() {
            document.getElementById('input10').style.display = "block";
        }
    </script>
</head> 
<!--Tengo tres cajas, cada caja contiene 3 inputs ocultos, con botones para aparecerlos-->
      <div>
<h1>Primera caja:</h1>
<button onclick="apa1()">Aparecer input1</button><br>
<input type="text" placeholder="numero 1" name="" id="input1" style="display: none;"><Br> 

<button onclick="apa2()">Aparecer input2</button><br>
<input type="text" placeholder="numero 2" name="" id="input2" style="display: none;"><Br> 

<button onclick="apa3()">Aparecer input3</button><br>
<input type="text" placeholder="numero 3" name="" id="input3" style="display: none;"><Br> 
     </div> 


     <div>
<h1>segunda caja:</h1>
<button onclick="apa4()">Aparecer input4</button><br>
<input type="text" placeholder="numero 4" name="" id="input4" style="display: none;"><br> 

<button onclick="apa5()">Aparecer input5</button><br>
<input type="text" placeholder="numero 5" name="" id="input5" style="display: none;"><br> 

<button onclick="apa6()">Aparecer input6</button><br>
<input type="text" placeholder="numero 6" name="" id="input6" style="display: none;"><br> 
     </div>


     <div>
<h1>Tercera caja:</h1>
 <button onclick="apa7()">Aparecer input7</button><br>
 <input type="text" placeholder="numero 7" name="" id="input7" style="display: none;"><br>

 <button onclick="apa8()">Aparecer input8</button><br>
 <input type="text" placeholder="numero 8" name="" id="input8" style="display: none;"><br>

 <button onclick="apa9()">Aparecer input9</button><br>
 <input type="text" placeholder="numero 9" name="" id="input9" style="display: none;"><br>
     </div>

<br>
<!--Este boton debera sumara el ultimo input de cada caja-->
<button>Sumar</button>
<input type="text" placeholder="resultado" name="">

</body>
</html>
2
  • estas usando java o javascript? por favor dale editar y añade la etiqueta del lenguaje correcto
    – user75901
    Commented el 12 nov. 2018 a las 2:18
  • Quiero hacer esto con JavaScript y HMTL. Commented el 12 nov. 2018 a las 2:20

1 respuesta 1

1

Bueno te ayudare de varias maneras, primero haciendo tu código mas óptimo.

Como ves tienes una función para activar cada input eso no es muy efectivo puedes hacer una que lo haga hay varias maneras pero te enseñare la que creo mas simple:

function apa(numero) { 
let input = document.getElementById('input' + numero);
if(input.style.display == "none"){
  input.style.display = "block";
 }
 else{
   input.style.display = "none";
 }

Pues ahora te lo explico, como ves es una sola función que entre paréntesis tiene numero esto es el nombre de un parametro(parametro es una valor que reciben las funciones o metodos), este parametro recibirá el numero del input que quieres activar luego he declarado una variable input esta almacenara el input que quieres mostrar u ocultar.

¿Pero como? Como ves recibimos el numero del input y con tan solo poner 'input' + numero estamos accediendo al input que quieres mostrar u ocultar y lo guardo en la variable input.

Luego hago una pregunta if que dice que si el input esta oculto proceda a mostrarse y luego hago un else este solo se ejecutaria si el input esta mostrado y se ocultara.

Ahora si recuerdas la función que he declarado recibe un parametro(valor) que sera el numero del input que quieres modificar. Entonces ¿como enviamos ese valor? Pues de esta manera:

<button onclick="apa(1)">Aparecer input1</button>

Esto aparecerá al input1.

<button onclick="apa(2)">Aparecer input2</button>

Y esto aparecerá al input2.

Como habrás notado solo debes escribir la misma función apa y entre paréntesis escribir el numero del input que quieres ocultar o mostrar apa(1) .

Ahora trabajaremos con los cálculos de las cajas. Hay muchas formas de hacerlo tal vez accediendo a los elementos hijos de la cajas, pero creo que sera mas entendible si lo hacemos mas a lo 'claro'.

Así que haremos dos nuevas funciones:

function calcular(){
  let valorCaja1 = parseInt(valor(1,3));
  let valorCaja2 = parseInt(valor(4,6));
  let valorCaja3 = parseInt(valor(7,9));
  let total = valorCaja1+ valorCaja2+valorCaja3;
  document.getElementById("total").value = total;
  alert('resultado es: ' + total);
}

function valor(desdeNumero, hastaNumero){
   let ultimoInput;
   for(var i = desdeNumero; i <= hastaNumero; i++){
      let input = document.getElementById('input' + i);
      //let input = document.getElementById('input' + i++);
      if(input.style.display == "block") {
         ultimoInput = input;
      }

   }
   if(ultimoInput == undefined){
      return 0
   }
   else{
        return ultimoInput.value;
    }
}

Explicación: la primera función calcular es la que llamaras desde el botón. Esta tiene tres primeras variables valorCaja estas tres variables llaman a la función valor y obtienen el valor del ultimo input de la caja que tiene los números de los inputs que están dentro de los paréntesis y lo convierte entero int. Ejemplo: la primera caja tiene los inputs desde el 1 hasta el 3 por eso le pasamos esos valores a la función valor(1,3) y eso obtendrá el valor que queremos. Luego de obtener los 3 valores los sumamos y guardamos el resultado en la variable total luego la próxima linea es una alerta con el resultado de la suma.

En fin tu código quedaría así:

    <!DOCTYPE html> 
<html> 
<head> 
<title>Sumando Cajas</title>

</script> 
</head> 
<!--Tengo tres cajas, cada caja contiene 3 inputs ocultos, con botones para aparecerlos--> 
<div> 
<h1>Primera caja:</h1> 
<button onclick="apa(1)">Aparecer input1</button>
<br> 
<input type="text" placeholder="numero 1" name="" id="input1" style="display: none;">
<br> 
<button onclick="apa(2)">Aparecer input2</button>
<br> 
<input type="text" placeholder="numero 2" name="" id="input2" style="display: none;">
<br> 
<button onclick="apa(3)">Aparecer input3</button>
<br> 
<input type="text" placeholder="numero 3" name="" id="input3" style="display: none;">
<br> 
</div> 
<div> 
<h1>segunda caja:</h1> 
<button onclick="apa(4)">Aparecer input4</button>
<br> 
<input type="text" placeholder="numero 4" name="" id="input4" style="display: none;">
<br> 
<button onclick="apa(5)">Aparecer input5</button>
<br> 
<input type="text" placeholder="numero 5" name="" id="input5" style="display: none;">
<br> 
<button onclick="apa(6)">Aparecer input6</button>
<br> 
<input type="text" placeholder="numero 6" name="" id="input6" style="display: none;">
<br> 
</div> 
<div> 
<h1>Tercera caja:</h1> 
<button onclick="apa(7)">Aparecer input7</button>
<br> 
<input type="text" placeholder="numero 7" name="" id="input7" style="display: none;">
<br> 
<button onclick="apa(8)">Aparecer input8</button>
<br> 
<input type="text" placeholder="numero 8" name="" id="input8" style="display: none;">
<br> 
<button onclick="apa(9)">Aparecer input9</button>
<br> 
<input type="text" placeholder="numero 9" name="" id="input9" style="display: none;">
<br> 
</div> 
<br> 
<!--Este boton debera sumara el ultimo input de cada caja--> 
<button onclick="calcular()">Sumar</button> 
<input type="text" placeholder="resultado" id="total" name=""> 
<script type="text/javascript">
    function apa(numero) { 
let input = document.getElementById('input' + numero);
if(input.style.display == "none"){
  input.style.display = "block";
 }
 else{
   input.style.display = "none";
 }
}

function calcular(){
  let valorCaja1 = parseInt(valor(1,3));
  let valorCaja2 = parseInt(valor(4,6));
  let valorCaja3 = parseInt(valor(7,9));
  let total = valorCaja1+ valorCaja2+valorCaja3;
  document.getElementById("total").value = total;
  alert('resultado es: ' + total);
}

function valor(desdeNumero, hastaNumero){
   let ultimoInput;
   for(var i = desdeNumero; i <= hastaNumero; i++){
      let input = document.getElementById('input' + i);
      //let input = document.getElementById('input' + i++);
      if(input.style.display == "block") {
         ultimoInput = input;
      }

   }
   if(ultimoInput == undefined){
      return 0
   }
   else{
        return ultimoInput.value;
    }
}

</script>
</body> 
</html>

Notas: let es una forma de declarar variables en javascript.info

Hay mejores formas pero son mas complejas y para explicarlo elegí está.

Cualquier duda pregunta en un comentario.

Edición: Agregue unos parseInt para convertir de texto a numero los valores de los inputs.

Cambie el error donde preguntaba si ultimoInput > 0 ya que estaba mal porque no guarda un entero sino que guardo un elemento y lo cambie a ultimoInput == undefined esto verifica si ninguno de los inputs esta activado devuelva un 0 para continuar sumando pero si la variable ultimoInput tiene valor significa que encontró un ultimo input activo y devuelve el valor de ese input para sumarlo.

5
  • Oye men te rifaste, eres un genio, no sabes cuanto me has ayudado, eres un angel men, eres un excelente profesor, explicas de una forma impresionante, tu respuesta esta excelente que la llevare a la universidad para compartirla con mis compañeros, men la verdad que te rifaste, no tengo como pagarte, muchisisimas gracias men eres el mejor. No te conozco pero te quiero amigo. Dame tu facebook o algo asi no se, es bueno tener amigos como tu wey. @denifer santiago fernandez Commented el 12 nov. 2018 a las 6:04
  • Editare la respuesta Commented el 12 nov. 2018 a las 14:21
  • @JuanAndresCesarJimenez Ya he editado la respuesta Commented el 12 nov. 2018 a las 14:34
  • necesito otra ayuda bro, quiero que el input2 se desplegué únicamente si el valor introducido en el input1 es mayor a 30, en realidad lo que quiero, es que por favor, si no es mucha molestia, me enseñes a poner condiciones a los inputs, y que los otros inputs se desplieguen si el input anterior cumple esa condición. Commented el 13 nov. 2018 a las 1:31
  • Si quieres que la responda en el sitio debes editar la pregunta o crear una nueva. Commented el 13 nov. 2018 a las 2:42

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.