Add the last input of each box

Question

Add the last input of each box

Navigation

#1 by (1 votes)

0

I need help. In my html programming I have 3 boxes, each box contains 3 hidden inputs with (display "none"), each input has a respective button, which serves to show or display that hidden input. The point is that I want the last input of each box to be added, that is, if the box one has only one input displayed, and the second box has 2 inputs, and the third has its three inuts displayed, then, I will add the first input of box one, plus the second input of box 2, plus the 3 input of box 3, what I want is to add the last inputs of each box, if the 3 boxes have their three inputs displayed, They will add the third or last input of each box. In a few repetitive words, the last input of each box will be added, if a box has only one input displayed, since that input will be added with the last input of the other box. This is urgent, please I need help, I would not have to pay to help me.

Here I attach my code for you to see and please beg me to help:

<!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>

javascript

asked by Juan Andres Cesar Jimenez 12.11.2018 в 03:14

source

1 answer

Doubt about else within a foreach Problems printing in the arcihvo.txt

score 1 · Accepted Answer

Well I will help you in several ways, first making your code more optimal.

As you see you have a function to activate each input that is not very effective you can do one that does it there are several ways but I will show you what I think is the simplest:

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

Well now I explain it to you, as you can see it is a single function that has number between brackets, this is the name of a parameter (parameter is a value that functions or methods receive), this parameter will receive the number of the input you want to activate then I have declared a variable input this will store the input you want to show or hide.

But how? As you see we receive the input number and with just put 'input' + number we are accessing the input you want to show or hide and save it in the variable input . p>

Then I ask a question if which says that if the input is hidden it will be displayed and then I do an else it will only be executed if the input is shown and hidden .

Now if you remember the function that I have declared, you will receive a parameter (value) that will be the number of the input you want to modify. So how do we send that value? Well in this way:

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

This will appear at input1.

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

And this will appear to input2.

As you may have noticed, you should only write the same apa function and in parentheses write the number of the input you want to hide or show apa (1) .

Now we will work with the calculations of the boxes. There are many ways to do it maybe by accessing the child elements of the boxes, but I think it will be more understandable if we do it more 'clear'.

So we will do two new functions:

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;
    }
}

Explanation: the first function to calculate is the one you will call from the button. This has three first variables valueCaja these three variables call the function value and get the value of the last input of the box that has the numbers of the inputs that are inside the parentheses and converts it integer int . Example: the first box has the inputs from 1 to 3 so we pass those values to the function value (1,3) and that will get the value we want. After obtaining the 3 values we add them and save the result in the variable total then the next line is an alert with the result of the sum.

In short, your code would look like this:

    <!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>

Notes: let is a way to declare variables in javascript. info

There are better ways but they are more complex and to explain it I chose it.

Any questions asked in a comment.

Edit: Add parseInt to convert the values of the inputs from text to number.

Change the error where I asked if ultimoInput > 0 because it was wrong because it does not save an integer but I save an element and change it to ultimoInput == undefined this verifies if none of the inputs is activated returns a 0 to continue adding but if the variable ultimoInput has value means that it found a last active input and returns the value of that input to add it.