Estoy creando una aplicación que permita sacar reporte de planillas de pago de un trabajador, pero al momento de hacer clic, pareciera que llama a la función Calcular
, pero no me muestra ningún resultado, solo se limpia todo el formulario por completo, he intentado de todo, pero sin solución, podrían ayudarme por favor.
Código HTML:
<div id="wrapper">
<h2 id="titleRegistration">REPORTE DE PLANILLAS</h2>
<form>
<fieldset id="planillas">
<legend>Planillas</legend>
<div class="divInformation">
<label class="label" for="nombre">Nombre:</label>
<input type="text" id="nombre" class="input" placeholder="Nombres y Apellidos" autocomplete="off" autofocus="autofocus"/>
</div>
<div class="divInformation">
<label class="label" for="horastrabajadas">Número de horas trabajadas:</label>
<input type="text" id="horastrabajadas" class="input" placeholder="N° de horas trabajadas" autocomplete="off" />
</div>
<div class="divInformation">
<label class="label" for="pagohora">Pago por hora trabajada:</label>
<input type="text" id="pagohora" class="input" placeholder="Ingrese pago por hora" autocomplete="off" />
</div>
<div class="divInformation">
<label class="label" for="horasextras">Horas extras:</label>
<input type="text" id="horasextras" class="input" placeholder="Ingres horas extras" autocomplete="off" />
</div>
<div class="divInformation">
<label class="label" for="numhijos">N° de hijos menores:</label>
<input type="text" id="numhijos" class="input" placeholder="Ingres numero de hijos" autocomplete="off" />
</div>
<div class="divInformation">
<label class="label" for="bonificacion">Bonificación:</label>
<input type="text" id="bonificacion" class="input" placeholder="" readonly />
</div>
<div class="divInformation">
<label class="label" for="sueldobruto">Ingreso Bruto:</label>
<input type="text" id="sueldobruto" class="input" placeholder="" readonly />
</div>
<div class="divInformation">
<label class="label" for="afp">AFP:</label>
<input type="text" id="afp" class="input" placeholder="" readonly />
</div>
<div class="divInformation">
<label class="label" for="essalud">EsSalud:</label>
<input type="text" id="essalud" class="input" placeholder="" readonly />
</div>
<div class="divInformation">
<label class="label" for="sueldoneto">Ingreso Líquido:</label>
<input type="text" id="sueldoneto" class="input" placeholder="" readonly />
</div>
</fieldset>
<fieldset id="btnEnviar">
<button id="btnCalcular" onclick="Calcular();">Calcular</button>
</fieldset>
</form>
</div>
Codigo JS:
function Calcular(){
let horastrabajadas = parseInt(document.getElementById('horastrabajadas').value);
let pagohora = parseInt(document.getElementById('pagohora').value);
let horasextras = parseInt(document.getElementById('horasextras').value);
let numhijos = parseInt(document.getElementById('numhijos').value);
let bonificacion = numhijos * 10;
let sueldobruto = (horastrabajadas * pagohora)+(horasextras * pagohora )+bonificacion;
let afp = sueldobruto * 0.13;
let essalud = sueldobruto * 0.08;
let sueldoneto = sueldobruto - (afp + essalud)
document.getElementById('bonificacion').value = bonificacion;
document.getElementById('sueldobruto').value = sueldobruto;
document.getElementById('afp').value = afp;
document.getElementById('essalud').value = essalud;
document.getElementById('sueldoneto').value = sueldoneto;
}
type="button"
al botón de calcular, pues al ser el único que hay y estar dentro de un<form>
lo interpreta como unsubmit
y lo ejecuta