1
Ich bin neu in JQuery und ich übe Code-Erstellung einen Gehaltsrechner. Ich möchte, dass der Benutzer auf "Stunden eingeben" klickt, um die Stundenfelder anzuzeigen. Ich fügte einen Stil von Anzeige: keine, um die Felder zu verstecken, wenn die Seite geladen wird, aber wenn ich versuche, auf "Stunden eingeben" zu klicken passiert nichts. Kann jemand bitte etwas Licht in die Richtung geben, was ich falsch mache, danke im Voraus.slideToggle() funktioniert nicht
HTML CODE
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Payroll Calculator</title>
<meta name="viewport" contect="width=devide-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/myStyle.css">
<script src="js/jquery.js"></script>
</head>
<body>
<header>
<div class="container">
<div class="col-xs-12">
<h1>Payroll Calculator</h1>
</div>
</div>
</header>
<div class="container">
<section class="main row">
<article class="col-xs-12 col-sm-6 col-md-6">
<h3>Employee</h3>
<form>
<div class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" aria-describedby="firstName" placeholder="Enter First Name">
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" aria-describedby="lastName" placeholder="Enter Last Name">
</div>
<fieldset class="form-group">
<div class="form-check">
<label class="form-check-label">Rate Type</label>
</div>
<div class="form-check" id="rateType">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optionsRadios" id="hourlu" value="hourly">Hourly
<input type="radio" class="form-check-input" name="optionsRadios" id="salary" value="salary">Salary
</label>
</div>
</fieldset>
<div class="form-group">
<label for="rate">Rate</label>
<input type="number" class="form-control" id="rate" aria-describedby="rate" placeholder="Enter Employee's Rate">
</div>
<div class="enterHours">
<h4>Enter Hours</h4>
</div>
<div class="hours">
<div class="form-group">
<label for="regularHours">Regular Hours</label>
<input type="number" class="form-control" id="regularHours" aria-describedby="regularHours">
</div>
<div class="form-group">
<label for="overtimeHours">Overtime Hours</label>
<input type="number" class="form-control" id="overtimeHours" aria-describedby="overtimeHours">
</div>
<div class="form-group">
<label for="otherHours">Other Hours</label>
<input type="number" class="form-control" id="otherHours" aria-describedby="otherHours">
</div>
</div>
<div class="form-group earnings">
<label for="regularEarnings">Regular Earnings</label>
<input type="text" class="form-control" id="regularEarnings" aria-describedby="regularEarnings">
</div>
<div class="form-group earnings">
<label for="overtimeEarnings">Overtime Earnings</label>
<input type="text" class="form-control" id="overtimeEarnings" aria-describedby="overtimeEarnings">
</div>
<div class="form-group earnings">
<label for="otherEarnings">Other Earnings</label>
<input type="text" class="form-control" id="otherEarnings" aria-describedby="otherEarnings">
</div>
<button type="button" class="btn btn-primary">Submit</button>
</form>
</article>
<aside class="col-xs-12 col-sm-6 col-md-6">
<h3 class="results">Results</h3>
<ul>
<li class="name">Name:</li>
<li class="rateType">Rate Type:</li>
<li class="rate">Rate:</li>
<li class="regHours">Regular Hours:</li>
<li class="otHours">Overtime Hours:</li>
<li class="otherHours">Other Hours:</li>
<li class="regEarnings">Regular Earnings:</li>
<li class="otEarnings">Overtime Earnings:</li>
<li class="otherEarnings">Other Earnings:</li>
<li class="gross">Gross Pay:</li>
<li class="socsec">Social Security Tax:</li>
<li class="med">Medicare Tax:</li>
</ul>
</aside>
</section>
</div>
<footer>
<div class="container" >
<h3>Andres Quintero</h3>
</div>
</footer>
<script src="js/app.js"></script>
</body>
JQUERY CODE
$(document).ready(function(){
$('enterHours').on('click', function(){
$('.hours').slideToggle('slow');
});
$("button").on('click', function(){
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var rateType = $("input:checked").val();
var rate = $('#rate').val();
var regHours = $('#regularHours').val();
var otHours = $('#overtimeHours').val();
var otherHours = $('#otherHours').val();
var regEarnings = $('#regularEarnings').val();
var otEarnings = $('#overtimeEarnings').val();
var otherEarnings = $('#otherEarnings').val();
function calculateGross(){
var grossWages = 0;
var earnings = parseFloat(regEarnings) + parseFloat(otEarnings) + parseFloat(otherEarnings);
if(rateType == "hourly"){
grossWages = (parseFloat(regHours) + (parseFloat(otHours) * 1.5) + parseFloat(otherHours)) * rate;
grossWages += earnings;
console.log(grossWages);
console.log(typeof(grossWages));
console.log(rateType);
}else if (rateType == "salary"){
grossWages = earnings;
console.log(grossWages);
console.log(rateType);
}
return parseFloat(grossWages).toFixed(2);
}
function calculateSocSec(){
var socSec = parseFloat(calculateGross() * .062).toFixed(2);
console.log(socSec);
return socSec;
}
function calculateMed(){
var med = parseFloat(calculateGross() * .0145).toFixed(2);
console.log(med);
return med;
}
$('.name').append('<p>' + firstName + " " + lastName + '</p>');
$('.rateType').append('<p>' + rateType + '</p>');
$('.rate').append('<p>' + rate + '</p>');
$('.regHours').append('<p>' + regHours + '</p>');
$('.otHours').append('<p>' + otHours + '</p>');
$('.otherHours').append('<p>' + otherHours + '</p>');
$('.regEarnings').append('<p>' + regEarnings + '</p>');
$('.otEarnings').append('<p>' + otEarnings + '</p>');
$('.otherEarnings').append('<p>' + otherEarnings + '</p>');
$('.gross').append('<p>' + calculateGross() + '</p>');
$('.socsec').append('<p>' + calculateSocSec() + '</p>');
$('.med').append('<p>' + calculateMed() + '</p>');
});
});