1
저는 jquery를 처음 사용하고 있으며 급여 계산기를 개발하는 코드를 연습하고 있습니다. 사용자가 "시간 입력"을 클릭하여 시간 필드를 표시하길 원합니다. 표시 스타일을 추가했습니다 : none 페이지가로드 될 때 필드를 숨기지 만 "Enter Hours"를 클릭하면 아무 일도 일어나지 않습니다. 누군가 내가 잘못하고있는 것에 대해 약간의 빛을 비춰 줄 수 있습니까? 미리 감사드립니다.slideToggle()이 작동하지 않습니다.
HTML 코드
<!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 코드
$(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>');
});
});