I need help with this webpage. Every time the user clicks add option, it needs t
ID: 3586792 • Letter: I
Question
I need help with this webpage. Every time the user clicks add option, it needs to create a new a new offer like displayed in the first picture(up to a maximum of 3). The second picture shows the current output. The code for both the javascript and html is listed below the pictures. Each offer is displayed after the user presses the add option button up to a maximum of three. There shouldn't be three offers listed before the button if the user doesn't click the button three times.
extra_credit.html
<!DOCTYPE html>
<html>
<head>
<title>Your title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="script.js" async></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="purchPrice">Purchase Price: </label>
</td>
<td>
<input type="text" name="purchPrice" id="purchPrice" value="1000" class="pprice"/>
</td>
</tr>
<tr>
<td colspan="2"> <div class="seperator"></div></td>
</tr>
<tr>
<td colspan="2">Financing offer details</td>
</tr>
<tr>
<td colspan="2">
<table border="1" cellpadding="10" cellspacing="0" class="innerTable">
<tr>
<td>
<label for="cashIncentive">Cash Incentive: </label>
</td>
<td>
<input type="text" name="cashIncentive" id="cashIncentive" value="1.2"/>
</td>
</tr>
<tr>
<td>
<label for="intRate">Interest Rate: </label>
</td>
<td>
<input type="text" name="intRate" id="intRate" value="5"/>
</td>
</tr>
<tr>
<td>
<label for="termInMonths">Term (months): </label>
</td>
<td>
<input type="text" name="termInMonths" id="termInMonths" value="5"/>
</td>
</tr>
<tr>
<td colspan="2"> <button>Add Option</button></td>
</tr>
</table>
</td>
</tr>
</table>
<div class="seperator"></div>
<div class = "offerDetails" id="offerDetails"></div>
</div>
</body>
</html>
script.js
function generateOption()
{
var initBalance = parseFloat(document.getElementById("purchPrice").value);
var cashIncentive = parseFloat(document.getElementById("cashIncentive").value);
var interestRatePercent = parseFloat(document.getElementById("interestRatePercent").value);
var currBalance;
var loanTerms = parseInt(document.getElementById("loanTerms").value);
var monthlyPay = 1000;
var html = '';
currBalance = initBalance;
html += "<div class='column item1'>";
html += "<table border='0' cellpadding='5' cellspacing='0' class='' width='100%'>";
html += "<tr>";
html += "<td align='left'>Offer 1:</td>";
html +="<td align='right'>X</td>";
html +="</tr>";
html +="<tr>";
html += "<td align='left'>Interest Rate:</td>";
html += "<td align='right'>#.##%</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Loan Term (months):</td>";
html += "<td align='right'>##</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Monthly Payment:</td>";
html += "<td align='right'>$###.##</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Total cost of ownership:</td>";
html += "<td align='right'>$####.##</td>";
html += "</tr>";
html += "</table>";
html += "</div>";
document.getElementById("offerDetails").innerHTML = html;
}
Explanation / Answer
Hi,
There are two errors at your code and I have enhanced the solution to accept 3 offers.
1.
Correct Code:
var loanTerms = parseInt(document.getElementById("termInMonths").value);
Error Code:
var loanTerms = parseInt(document.getElementById("loanTerms").value);
You have ID as termInMonths in your HTML But You used loanTerms in your Script.
2.
Correct Code:
var interestRatePercent = parseFloat(document.getElementById("intRate").value);
Error Code:
var interestRatePercent = parseFloat(document.getElementById("interestRatePercent").value);
You have ID as intRate in your HTML but You used interestRatePercent in your script.
Final Script Function:
1. Corrected the errors. So that you can see the offers.
2. Added maximum of three offers
3. You can remove alert statement which displayed after three offers.
Solution:
I used children length. If there are three children, do not add any further offers. Else add offers.
function generateOption()
{
var offerId = document.getElementById("offerDetails").children.length;
if(offerId < 3){
var initBalance = parseFloat(document.getElementById("purchPrice").value);
var cashIncentive = parseFloat(document.getElementById("cashIncentive").value);
console.log(cashIncentive);
var interestRatePercent = parseFloat(document.getElementById("intRate").value);
console.log(interestRatePercent);
var currBalance;
var loanTerms = parseInt(document.getElementById("termInMonths").value);
var monthlyPay = 1000;
var html = '';
currBalance = initBalance;
html += "<div class='column item1'>";
html += "<table border='0' cellpadding='5' cellspacing='0' class='' width='100%'>";
html += "<tr>";
html += "<td align='left'>Offer "+(offerId+1)+":</td>";
html +="<td align='right'>X</td>";
html +="</tr>";
html +="<tr>";
html += "<td align='left'>Interest Rate:</td>";
html += "<td align='right'>#.##%</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Loan Term (months):</td>";
html += "<td align='right'>##</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Monthly Payment:</td>";
html += "<td align='right'>$###.##</td>";
html += "</tr>";
html += "<tr>";
html += "<td align='left'>Total cost of ownership:</td>";
html += "<td align='right'>$####.##</td>";
html += "</tr>";
html += "</table>";
html += "</div>";
document.getElementById("offerDetails").insertAdjacentHTML('beforeend',html);
}else{
alert("You have max of 3 offers");
}
}
Please let me know if you face any other error. It worked as expected. I have verified in the fiddle as well.
Fiddle: https://jsfiddle.net/ue905mzk/1/
Thanks.