Hawkins_IN
New Coder
Hi,
I'm trying to get the following code to display the calculated output into a table however, I can't seem to get all the results to print correctly I'm only getting a few answers. I believe I've done the calculations part correctly so it could just be how I'm passing it to the table that's the issue. This is the code i have so far (I've highlighted in red where i think the issue must be):
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- The title of the page and where the CSS file is actioned-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Intro content of the page and navigation to other pages inside the header-->
<header class="top">
<a href=index.html><img src="images/banner.PNG" style="max-width: 100%; height: auto;" title="Homepage" alt="banner image"></a>
</header>
<!--Main contents of the page-->
<main>
<h2>Online Salary Calculator</h2>
<p>Our online salary calculator service can be used to give you a rough idea of how much you will be earning based on your income.</p>
<form>
<label>Job Title:</label>
<input type = "text" id="jobTitle" required>
<label>Income:</label>
<input type = "number" id="income" required>
<select id="rate">
<option value = "year">per year</option>
<option value = "month">per month</option>
<option value = "week">per week</option>
<option value = "hour">per hour</option>
</select>
<label>Hours Worked:</label>
<input type = "number" id="hoursWork" required>
<button id="calculateButton" type="button">Calculate</button>
</form>
<table>
<thead>
<tr>
<th>Job Title</th>
<th>Hourly Rate</th>
<th>Weekly Rate</th>
<th>Monthly Rate</th>
<th>Yearly Rate</th>
</tr>
</thead>
<tbody id="incomeResults"></tbody>
</table>
<script>
function calculate(){
const jobTitle = document.getElementById("jobTitle").value;
const income = document.getElementById("income").value;
const rate = document.getElementById("rate").value;
const hoursWork = document.getElementById("hoursWork").value;
let hourRate, weekRate, monthRate, yearRate;
if (rate=== "year"){
hourRate = income / 52 / hoursWork;
weekRate = income / 52;
monthRate = income / 12;
yearRate = income;
}else if (rate==="month"){
hourRate = income / 4 / hoursWork;
weekRate= income / 4;
monthRate = income;
yearRate = income * 12;
}else if (rate==="week"){
hourRate = income / hoursWork;
weekRate = income;
monthRate = income * 4;
yearRate = income * 52;
}else{
hourRate = income;
weekRate = income * hoursWork;
monthRate = income * hoursWork * 4;
yearRate = income * 52;
}
const incomeResults = document.getElementById("incomeResults");
const newRow = incomeResults.insertRow(-1);
const jobTitleCell = newRow.insertCell(0);
const hourRateCell = newRow.insertCell(1);
const weekRateCell = newRow.insertCell(2);
const monthRateCell = newRow.insertCell(3);
const yearRateCell = newRow.insertCell(4);
jobTitleCell.innerHTML = jobTitle;
hourRateCell.innerHTML = hourRate.toFixed(2);
weekRateCell.innerHTML = weekRate.toFixed(2);
monthRateCell.innerHTML = monthRate.toFixed(2);
yearRateCell.innerHTML = yearRate.toFixed(2);
}
document.getElementById("calculateButton").addEventListener("click",calculate);
</script>
</main>
</body>
</html>
I'm trying to get the following code to display the calculated output into a table however, I can't seem to get all the results to print correctly I'm only getting a few answers. I believe I've done the calculations part correctly so it could just be how I'm passing it to the table that's the issue. This is the code i have so far (I've highlighted in red where i think the issue must be):
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- The title of the page and where the CSS file is actioned-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Intro content of the page and navigation to other pages inside the header-->
<header class="top">
<a href=index.html><img src="images/banner.PNG" style="max-width: 100%; height: auto;" title="Homepage" alt="banner image"></a>
</header>
<!--Main contents of the page-->
<main>
<h2>Online Salary Calculator</h2>
<p>Our online salary calculator service can be used to give you a rough idea of how much you will be earning based on your income.</p>
<form>
<label>Job Title:</label>
<input type = "text" id="jobTitle" required>
<label>Income:</label>
<input type = "number" id="income" required>
<select id="rate">
<option value = "year">per year</option>
<option value = "month">per month</option>
<option value = "week">per week</option>
<option value = "hour">per hour</option>
</select>
<label>Hours Worked:</label>
<input type = "number" id="hoursWork" required>
<button id="calculateButton" type="button">Calculate</button>
</form>
<table>
<thead>
<tr>
<th>Job Title</th>
<th>Hourly Rate</th>
<th>Weekly Rate</th>
<th>Monthly Rate</th>
<th>Yearly Rate</th>
</tr>
</thead>
<tbody id="incomeResults"></tbody>
</table>
<script>
function calculate(){
const jobTitle = document.getElementById("jobTitle").value;
const income = document.getElementById("income").value;
const rate = document.getElementById("rate").value;
const hoursWork = document.getElementById("hoursWork").value;
let hourRate, weekRate, monthRate, yearRate;
if (rate=== "year"){
hourRate = income / 52 / hoursWork;
weekRate = income / 52;
monthRate = income / 12;
yearRate = income;
}else if (rate==="month"){
hourRate = income / 4 / hoursWork;
weekRate= income / 4;
monthRate = income;
yearRate = income * 12;
}else if (rate==="week"){
hourRate = income / hoursWork;
weekRate = income;
monthRate = income * 4;
yearRate = income * 52;
}else{
hourRate = income;
weekRate = income * hoursWork;
monthRate = income * hoursWork * 4;
yearRate = income * 52;
}
const incomeResults = document.getElementById("incomeResults");
const newRow = incomeResults.insertRow(-1);
const jobTitleCell = newRow.insertCell(0);
const hourRateCell = newRow.insertCell(1);
const weekRateCell = newRow.insertCell(2);
const monthRateCell = newRow.insertCell(3);
const yearRateCell = newRow.insertCell(4);
jobTitleCell.innerHTML = jobTitle;
hourRateCell.innerHTML = hourRate.toFixed(2);
weekRateCell.innerHTML = weekRate.toFixed(2);
monthRateCell.innerHTML = monthRate.toFixed(2);
yearRateCell.innerHTML = yearRate.toFixed(2);
}
document.getElementById("calculateButton").addEventListener("click",calculate);
</script>
</main>
</body>
</html>