primero que todo gracias por leerme. Les comento...Estoy haciendo una especie de calculadora con javascript. Tengo dos cuadros, el primero en donde ingreso los datos (cuadro "datos" y el segundo es a donde llegan los cálculos ya realizados (cuadro "situación actual") por medio de un botón.
La idea es que sume la suscripción base + el valor de la nube + la suscripción variable. Esta ultima se obtiene de (N° de portafolios totales - N° de portafolios en suscripción base ) * precio por portafolio adicional.
Al realizar los cálculos me da el error "NaN" en la suscripción variable y el TOTAL y no he podido solucionarlo, desde ya agradezco sus aportes, muchas gracias.
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);
function Data() {
var resultado = (NPT-NPSB) * PPA ;
var resultado2 = resultado + SB1 + NUBE;
document.getElementById("TOTALSA").value=resultado2;
document.getElementById("SB").value=document.getElementById('SB1').value;
document.getElementById("NUBE").value = document.getElementById('VAN').value;
document.getElementById("SV").value =resultado;
}
<body>
<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">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">Precio 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>
</body>
Document
está con mayúscula y debe ser minúsculadocument
. Revisa si ya funciona.