jerrykobes
12-22-2008, 03:12 PM
I entered this DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
which I have been using since reading my CSS book. However, when I used the following code from my Javascript book with that DOCTYPE above it prevented the script from working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
.result {
font-weight:bold;
}
#payment {
text-decoration: underline;
}
</style>
</head>
<body>
<form name="loandata">
<table>
<tr><td><b>Enter Loan Information:</b></td></tr>
<tr>
<td>1) Amount of the loan (any currency):</td>
<td><input type="text" name="principal" onchange="calculate();"></td>
</tr>
<tr>
<td>2) Annual percentage rate of interest:</td>
<td><input type="text" name="interest" onchange="calculate();"></td>
</tr>
<tr>
<td>3) Repayment period in years:</td>
<td><input type="text" name="years" onchange="calculate();"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Compute" onlick="calculate();"></td>
</tr>
<tr><td><b>Payment Information</b></td>/tr>
<tr>
<td>4) Your monthly payment:</td>
<td>$<span class="result" id="payment"></span></td>
</tr>
<tr>
<td>5) Your total payment:</td>
<td>$<span class="result" id="total"></span></td>
</tr>
<tr>
<td>6) Your total interest payments:</td>
<td>$<span class="result" id="totalinterest"></span></td>
</tr>
</table>
</form>
<script language="Javascript">
function calculate() {
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value * 12;
var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);
var payment = document.getElementById("payment");
var total = document.getElementById("total");
var totalinterest = document.getElementById("totalinterest");
if (isFinite(monthly)) {
payment.innerHTML = monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
}
else {
payment.innerHTML = "";
total.innerHTML = "";
totalinterest.innerHTML = "";
}
}
</script>
</body>
</html>
However, it runs fine I remove that DOCTYPE statement. Why did this happen and what is the proper DOCTYPE to use. Also, a bit less important but still annoying, whenever I open this html/javascript I get this at the top "/tr>" and I can't find any incomplete tag in my code anywhere. Why does it keep on appearing?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
which I have been using since reading my CSS book. However, when I used the following code from my Javascript book with that DOCTYPE above it prevented the script from working:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style>
.result {
font-weight:bold;
}
#payment {
text-decoration: underline;
}
</style>
</head>
<body>
<form name="loandata">
<table>
<tr><td><b>Enter Loan Information:</b></td></tr>
<tr>
<td>1) Amount of the loan (any currency):</td>
<td><input type="text" name="principal" onchange="calculate();"></td>
</tr>
<tr>
<td>2) Annual percentage rate of interest:</td>
<td><input type="text" name="interest" onchange="calculate();"></td>
</tr>
<tr>
<td>3) Repayment period in years:</td>
<td><input type="text" name="years" onchange="calculate();"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Compute" onlick="calculate();"></td>
</tr>
<tr><td><b>Payment Information</b></td>/tr>
<tr>
<td>4) Your monthly payment:</td>
<td>$<span class="result" id="payment"></span></td>
</tr>
<tr>
<td>5) Your total payment:</td>
<td>$<span class="result" id="total"></span></td>
</tr>
<tr>
<td>6) Your total interest payments:</td>
<td>$<span class="result" id="totalinterest"></span></td>
</tr>
</table>
</form>
<script language="Javascript">
function calculate() {
var principal = document.loandata.principal.value;
var interest = document.loandata.interest.value / 100 / 12;
var payments = document.loandata.years.value * 12;
var x = Math.pow(1 + interest, payments);
var monthly = (principal*x*interest)/(x-1);
var payment = document.getElementById("payment");
var total = document.getElementById("total");
var totalinterest = document.getElementById("totalinterest");
if (isFinite(monthly)) {
payment.innerHTML = monthly.toFixed(2);
total.innerHTML = (monthly * payments).toFixed(2);
totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
}
else {
payment.innerHTML = "";
total.innerHTML = "";
totalinterest.innerHTML = "";
}
}
</script>
</body>
</html>
However, it runs fine I remove that DOCTYPE statement. Why did this happen and what is the proper DOCTYPE to use. Also, a bit less important but still annoying, whenever I open this html/javascript I get this at the top "/tr>" and I can't find any incomplete tag in my code anywhere. Why does it keep on appearing?