0

primero gracias por leerme. Les cuento para contextualizar... tengo 2 formularios, uno donde ingreso datos con un input (formulario "datos"), otro donde recibo esos datos y ejecuto algunos cálculos con los datos ya ingresados (formulario "situación actual") y una tabla final donde quiero realizar algunos cálculos (tabla "Solución).

Tengo varias dudas respecto a como realizar lo que quiero.

Primero: Tengo el script calcularSV el cual me permite calcular la "Suscripción mensual variable" en la tabla "solución" según el número de portafolios totales que se ingresen, se me ocurrió llamar la función a través de una variable y luego arrojarla en la tabla a través de los td con innerHTML pero no me funciona.

Segundo: Si llego a realizar lo de arriba mi idea es sumar la "Suscripción base hasta 50 portafolios" + "Suscripción mensual variable" + Nube (siempre es 0, así que se puede omitir ese valor) y arrojar el resultado en "TOTAL" en la tabla "solución". Acá no he intentado mucho porque he estado enfocado en el primer punto, pero me imagino que se puede hacer con jquery, pero si tienen alguna idea de como hacerlo estaría genial.

Tercero: Ya con ese "TOTAL" de la tabla solución debería poder sacar el "AHORRO MENSUAL" y el "AHORRO ANUAL". El "AHORRO MENSUAL" sería el "TOTAL" de la tabla situación actual - "TOTAL" de la tabla solución. y el "AHORRO ANUAL" sería el "AHORRO MENSUAL" * 12. Esto tampoco lo he intentado pero no se me ocurre como poder restar el valor de un input al valor que hay en los td, si alguien sabe como podría hacerlo se lo agradecería un montón.

Se que es mucho texto y quizás un poco enredado de entender por eso desde ya te agradezco si lo leíste, más aún si lo intentaste y te diste el tiempo de realizar algo. Como vez soy relativamente nuevo en esto, por eso tengo tantas preguntas y ganas de aprender por eso desde ya te agradezco cualquier aporte o idea de como poder realizar esto. Saludos.

function calcularSV() {

        var NPT=Number(document.getElementById('NPT').value);
        var fijo = "0";
      
        if(NPT <= 50){
                  total += fijo;
              }
              else if(NPT <= 100){
                  total += fijo + ((NPT-50)*10);
              }
              else if(NPT <=200){
                total += fijo + 500 + ((NPT-100)*5);
              }
              else if(NPT <=500){
                total += fijo + 1000 + ((NPT-200)*2.5);
              }
                else if(NPT <=1500){
                total += fijo + 1750 + ((NPT-500)*1.5);
              }
                else{
                total += fijo + 3250 + ((NPT-1500)*0.9);
              }
          return total;
      }

    function Data() {

          var NPT=Number(document.getElementById('NPT').value); 
          var NPSB=Number(document.getElementById('NPSB').value);
          var PPA=Number(document.getElementById('PPA').value);
          var SB=Number(document.getElementById('SB').value);
          var SB1=Number(document.getElementById('SB1').value);
          var NUBE=Number(document.getElementById('NUBE').value);
          var SV=Number(document.getElementById('SV').value);

          var resultado = (NPT-NPSB) * PPA ;
          var resultado2 = resultado + SB1 + NUBE ;
          

          document.getElementById("SV").value = resultado;
          document.getElementById("SV").value = resultado;
          document.getElementById("TOTALSA").value= resultado2;
          document.getElementById("SB").value=document.getElementById('SB1').value;
          document.getElementById("NUBE").value = document.getElementById('VAN').value;
    }
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>

   <div class="container">


      <div class="card float-right" style="width: 32rem;">
        <div class="card-header"><h5>Situación actual</h5></div>
        <div class="card-block p-0">
        <div class="row">
        <div class="col-12">
        <table class="table table-hover">

      <tbody>
          <tr>
              <th class="text-center"scope="row">Suscripción base </th>
              <td class="trans text-center"> <input id="SB" class="form-control"></td>
              
          </tr>


          <tr>
            <th class="text-center" scope="row">Suscripción variable</th>
            <td class="trans text-center"> <input id="SV" class="form-control"> </td>
            
          </tr>

          <tr>
            <th class="text-center" scope="row">Nube</th>
            <td class="trans text-center"><input id="NUBE" class="form-control"></td>
            
          </tr>

          <tr>
            <th class="text-center" scope="row">TOTAL</th>
            <td class="trans text-center"><input id="TOTALSA" class="form-control"></td>
            
          </tr>
        
      </tbody>
    </table>
  </div>
</div>
                <div class="card-footer text-muted"><h6></h6></div>
        </div>
   </div>






   

<div class="card mt-3" style="width: 36rem;">
    <div class="card-header"><h5>Datos</h5></div>
    <div class="card-block p-0">
    <div class="row">
      <div class="col-12">

          <div class="container">
        <form>

          <div class="row mt-2">

            <div class="col">
                <div class="form-group">
                  <label for="inputCity" class="font-weight-bold">N° Portafolios totales</label>
                  <input  type="number"  class="form-control" placeholder="Escribe el valor" id="NPT">
                </div>
  
              </div>


          
            <div class="col">
              <div class="form-group">
                <label for="inputCity" class="font-weight-bold">N° Portafolios en suscripción base</label>
                <input type="number" placeholder="Escribe el valor"  class="form-control" id="NPSB">
              </div>

            </div>

          </div>

        </form>

          <form>
              <div class="row">

                <div class="col">
                    <div class="form-group">
                      <div class="form-group">
                        <label for="inputCity" class="font-weight-bold"> Valor de la suscripción base</label>
                        <input id="SB1"  placeholder="Escribe el valor" class="form-control" >
                      </div>
                    </div>
                  </div>


              <div class="col">
                  <div class="form-group">
                    <div class="form-group">
                      <label for="inputCity" class="font-weight-bold">Valor por portafolio adicional</label>
                      <input id="PPA"  placeholder="Escribe el valor" class="form-control" >
                    </div>
                  </div>
                </div>

              </div>
                </form>


                <form>
                  <div class="row">
    
                    <div class="col">
                        <div class="form-group">
                          <div class="form-group">
                            <label for="inputCity" class="font-weight-bold">Valor almacenamiento en la nube</label>
                            <input id="VAN" placeholder="Escribe el valor" class="form-control" >
                          </div>
                        </div>
                      </div>
    
    
                  <div class="col">
                      <div class="form-group">
                        <div class="form-group">
                        
                        
                        </div>
                      </div>
                    </div>
    
                  </div>
                    </form>
                    <div class="trans text-center">
                      <button onclick="Data()" type="button" class="btn btn-primary  mb-3 font-weight-bold" >Realizar Comparación</button>
                  </div>
              </div>
      </div>
    </div>
        <div class="card-footer text-muted"><h6></h6></div>
      </div>
    </div>










   <div class="card mt-4 mb-4">
    <div class="card-header"><h4>Solución</h4></div>
    <div class="card-block p-0">
    <div class="row">
      <div class="col-12">
        <table id="tablabritech" class="table">

          <thead>
            <tr class="encabezado">
              <th class="text-center" scope="col">Solución</th>
              <th scope="col">Solución año 1</th>
              <th scope="col">Solución año 2</th>
              <th scope="col">Solución año 3</th>
              <th scope="col">Solución año 4</th>
              <th scope="col">Solución año 5</th>
            </tr>
          </thead>
          <tbody>
            <tr>

                    <td>Suscripción base hasta 50 portafolios</td>
                    <td id="td1" class="trans text-center">2000</td>
                    <td id="td2"class="trans text-center">2500</td>
                    <td id="td3"class="trans text-center">2500</td>
                    <td id="td4"class="trans text-center">2500</td>
                    <td id="td5"class="trans text-center">2500</td>
            </tr>


            <tr>

                    <td>Suscripción mensual variable</td>
                    <td id="td6" class="trans text-center">1000</td>
                    <td id="td7" class="trans text-center">0</td>
                    <td id="td8" class="trans text-center">0</td>
                    <td id="td9" class="trans text-center">0</td>
                    <td id="td10"class="trans text-center">0</td>
            </tr>


            <tr>
                    <td>Nube</td>
                    <td id="td11" class="trans text-center">0</td>
                    <td id="td12" class="trans text-center">0</td>
                    <td id="td13" class="trans text-center">0</td>
                    <td id="td14" class="trans text-center">0</td>
                    <td id="td15" class="trans text-center">0</td>
            </tr>

            <tr class="total">
                <td class="font-weight-bold trans text-center">TOTAL</td>
                <td id="td16" class="font-weight-bold trans text-center">0</td>
                <td id="td17" class="font-weight-bold trans text-center">0</td>
                <td id="td18" class="font-weight-bold trans text-center">0</td>
                <td id="td19" class="font-weight-bold trans text-center">0</td>
                <td id="td20" class="font-weight-bold trans text-center">0</td>
             </tr>

             <tr class="ahorromensual">
                <td class="font-weight-bold trans text-center">AHORRO MENSUAL</td>
                <td id="td21" class="font-weight-bold trans text-center">7000</td>
                <td id="td22" class="font-weight-bold trans text-center">7000</td>
                <td id="td23" class="font-weight-bold trans text-center">83000</td>
                <td id="td24" class="font-weight-bold trans text-center">83000</td>
                <td id="td25" class="font-weight-bold trans text-center">83000</td>
             </tr>

             <tr class="ahorroanual">
                <td class="font-weight-bold trans text-center">AHORRO ANUAL</td>
                <td id="td27" class="font-weight-bold trans text-center">7000</td>
                <td id="td28" class="font-weight-bold trans text-center">7000</td>
                <td id="td29" class="font-weight-bold trans text-center">83000</td>
                <td id="td30" class="font-weight-bold trans text-center">83000</td>
                <td id="td31" class="font-weight-bold trans text-center">83000</td>
             </tr>
        
        
        </tbody>
        </table>
      </div>
    </div>
    <div class="card-footer text-muted"><h6></h6></div>
</div>
    <!--<div class="card-footer">
        <br>
    </div>-->

</tbody>
</div>
   </div>

</body>
</html>

1 respuesta 1

0

Has hecho 3 preguntas en una. Y la segunda y tercera dependen de la primera así que te dejo la solución de la primera para que puedas continuar con las otras dos.

Primero: Tengo el script calcularSV el cual me permite calcular la "Suscripción mensual variable" en la tabla "solución" según el número de portafolios totales que se ingresen, se me ocurrió llamar la función a través de una variable y luego arrojarla en la tabla a través de los td con innerHTML pero no me funciona.

Eso se resuelve corrigiendo algunos errores en la función calcularSV():

function calcularSV() {

  var NPT = Number(document.getElementById('NPT').value);

  // 1. La variable debe ser tipo número para sea sumada al usar el operador +
  // si la variable es tipo cadena solo se va a concatenar su valor
  // var fijo = "0";

  var fijo = 0;
  // 2. La variable total no existe
  let total = 0;

  // 3. Los rangos de comparación
  // el primer if se cumplirá siempre que NPT tenga un valor <= 50
  if(NPT <= 50){
    total += fijo;
  }
  // en el segundo if debe colocarse el rango > 50 && <= 100 eso se cumplirá
  // si el valor de NPT está entre 51 y 100
  // si solo se deja una condición <= 100 entonces se cumplirá con cualquier
  // valor <= 100, por ejemplo 10, el cual debe estar en la condición anterior
  // lo que causará que la condición anterior sea reemplaza por esta
  // lo mismo aplica para el resto de rangos
  else if(NPT >50 && NPT <= 100){
    total += fijo + ((NPT-50)*10);
  }
  else if(NPT > 100 && NPT <=200){
    total += fijo + 500 + ((NPT-100)*5);
  }
  else if(NPT > 200 && NPT <=500){
    total += fijo + 1000 + ((NPT-200)*2.5);
  }
  else if(NPT > 500 && NPT <=1500){
    total += fijo + 1750 + ((NPT-500)*1.5);
  }
  else{
    total += fijo + 3250 + ((NPT-1500)*0.9);
  }

  return total;
}
3
  • Me funcionó perfecto el script al llamarlo como variable en un innerHTML, muchas gracias!! Aunque aún sigo pegado con la resta entre el Total del input (situación actual) y el Total de la tabla (Solución), intente a ambas transformarlas a variable para luego sacarla la resta a través de un innerHTML, pero me arroja el valor NaN, que crees que pueda hacer para solucionar eso?? el 5 oct. 2020 a las 19:05
  • Me parece mejor que se de por finalizada esta pregunta e inicies una nueva con el código actualizado, lo que estás intentando y el problema puntual que tienes para que sea más ordenado.
    – Lobos
    el 5 oct. 2020 a las 19:12
  • Tienes razón, lo haré de ese modo, muchas gracias por los consejos y todo lo que me haz ayudado, en serio fue de mucha utilidad. el 5 oct. 2020 a las 20:14

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.