How can I print values to the left of my table?
-
21-12-2019 - |
Question
I need to print the values to the left of the table like shown here:
I know how to input the variables and text, just not sure where to insert code and how to position correctly.
<html>
<head>
<title></title>
<script type="text/javascript">
function fixVal(value,numberOfCharacters,numberOfDecimals,padCharacter) {
var i, stringObject, stringLength, numberToPad;
value = value * Math.pow(10,numberOfDecimals);
value = Math.round(value);
stringObject = new String(value);
stringLength = stringObject.length;
while(stringLength < numberOfDecimals + 1) {
stringObject = "0"+stringObject;
stringLength = stringLength+1;
}
if(numberOfDecimals > 0) {
stringObject = stringObject.substring(0,stringLength-numberOfDecimals)+"."+
stringObject.substring(stringLength-numberOfDecimals,stringLength);
}
if (stringObject.length < numberOfCharacters && numberOfCharacters>0) {
numberToPad=numberOfCharacters-stringObject.length;
for (i=0; i<numberToPad; i=i+1) {
stringObject=padCharacter+stringObject;
}
}
return stringObject;
}
function buildTable() {
var amount = parseFloat(document.getElementById("loanAmt").value );
var monthly = parseInt(document.getElementById("monthlyPay").value );
var rate = parseFloat(document.getElementById("intRte").value );
rate = rate / 100 / 12;
var msg = "<table id='tablefont' border='3' width='65%'>";
msg += "<tr>";
msg += "<td>Month</td>";
msg += "<td>Principal Paid</td>";
msg += "<td>Interest Paid</td>";
msg += "<td>Loan Balance</td>";
msg += "</tr>";
newPrincipal=amount;
var m = 1; //months
while ( amount > 0 ) {
var interest = amount * rate;
var principal = monthly - interest;
if (principal > amount) {
principal = amount;
amount = 0.0;
} else {
amount -= principal;
}
msg += "<tr><td align='left' bgcolor='pink'>"+m+"</td> \
<td align='left' bgcolor='pink'>$"+fixVal(principal,0,2,' ')+"</td> \
<td align='left' bgcolor='pink'>$"+fixVal(interest,0,2,' ')+"</td> \
<td align='left' bgcolor='pink'>$"+fixVal(amount,0,2,' ')+"</td></tr>";
m++;
}
msg += "</table>";
document.getElementById("results").innerHTML = msg;
}
</script>
<style type="text/css">
body {
background: black;
font-family: arial;
font-weight: bold;
}
#contentwrap {
width: 700px;
margin: 40px auto 0px auto;
background: #FFFFCC;
text-align: center;
border: 6px red solid;
border-radius: 10px;
padding: 40px;
}
#tablewrap {
background-color: lightblue;
border: 10px pink solid;
}
#tablefont {
font-weight: bold;
text-align: center;
}
table {
border: 5px blue solid;
background-color: #FFFFCC;
}
#header {
text-align: center;
font-size: 2.5em;
text-shadow: yellow 3px 3px;
margin-bottom: 18px;
color: red;
}
#button {
background: blue;
color: white;
cursor: pointer;
padding: 5px 0px 5px 0px;
border: 1px solid red;
border-radius: 25px;
width: 150px;
}
.contentTitles {
color: green;
font-weight: bold;
}
.style {
background: lightblue;
font-family: comic sans ms;
border: 6px blue double;
color: green;
font-weight: bold;
}
</style>
</head>
<body>
<div id="contentwrap">
<div id="header">Javascript Loan Calculator</div>
<form>
<div class="contentTitles">Enter Loan Amount<br />
<input type="text" id="loanAmt" class="style"><p />
Interest Rate (%)<br />
<input type="text" id="intRte" class="style"><p />
Monthly Payment Amount<br />
<input type="text" id="monthlyPay" class="style"><p />
<div style="margin-top:20px;">
<input type="button" value="Process Data" id="button" onClick="buildTable()">
</div>
</form>
<center>
<div id="results" style="margin-top:20px;"></div>
</center>
</div> <!-- ends div#contentwrap -->
</body>
</html>
Solution
You can do something like this.
EDIT: I think it's better to prepare the overview at the same time as the results (so rename buildTable
to buildResults
:
function buildResults() {
(same as current build table) PLUS:
var msg2 = "";
msg2 += "Loan Amount: " + document.getElementById("loanAmt").value + "<br>";
msg2 += "Annual Interest: " + document.getElementById("intRte").value + "<br>";
msg2 += "Monthly Payment: " + document.getElementById("monthlyPay").value + "<br>";
document.getElementById("overview").innerHTML = msg2;
Change the button definition:
<input type="button" value="Process Data" id="button" onClick="buildResults();">
Add a div and float it to the left of the div with the centered table:
<div id="overview" style="margin-top:20px;margin-right:20px;float:left;align:left;"></div>
Of course, there is some more formatting and cleanup to do to have it exactly match what you are looking for.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow