We Keep Coding

Assign a letter to a number value within a specific range

a learning noobie here.
I am needing a script that can take a number value and assign a letter to it, depending on the range the value falls within. Please run the simple example below:
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<table>
<tr>
<th>Achieved mark</th>
<th>Grade</th>
</tr>
<tr>
<td>Above 80 (max 100)</td>
<td>A</td>
</tr>
<tr>
<td>60-79</td>
<td>B</td>
</tr>
<tr>
<td>40-59</td>
<td>C</td>
</tr>
<tr>
<td>Below 39 (min 0)</td>
<td>D</td>
</tr>
</table>
<br>
<p>Enter achieved mark:</p>
<input type="input" id="mark" value="73">
<button onclick="myFunction()">GO!</button>
<p>Grade result:</p>
<input type="output" id="grade">
For this above example, when the "GO!" button is clicked, a grade letter would be output depending on the range of the input value.
Thank you in advance.

You can do it like this
First thing is you need to get the value of element that you can get by.
document.getElementById('mark').value this expression.
Now based on this value you can calculate grade by simply using if conditions.
Than you need to assign it to your grade (input) that you can achieve by this document.getElementById('grade').value = grade
function myFunction(e){
var ele = document.getElementById('mark').value;
var grade ='';
if(ele > 80){
grade = 'A';
} else if(ele <=79 && ele >=60){
grade = 'B';
} else if(ele <=59 && ele >=40){
grade = 'C'
} else {
grade = 'D';
}
document.getElementById('grade').value = grade;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<table>
<tr>
<th>Achieved mark</th>
<th>Grade</th>
</tr>
<tr>
<td>Above 80 (max 100)</td>
<td>A</td>
</tr>
<tr>
<td>60-79</td>
<td>B</td>
</tr>
<tr>
<td>40-59</td>
<td>C</td>
</tr>
<tr>
<td>Below 39 (min 0)</td>
<td>D</td>
</tr>
</table>
<br>
<p>Enter achieved mark:</p>
<input type="input" id="mark" value="73">
<button onclick="myFunction()">GO!</button>
<p>Grade result:</p>
<input type="output" id="grade">

Simple else if condition:
function myFunction() {
var num = document.getElementById('mark').value;
var result = 'A';
num = Math.min(100, Math.max(0, num));
if (num < 40) {
result = 'D';
} else if (num < 60) {
result = 'C';
} else if (num < 80) {
result = 'B';
}
document.getElementById('grade').value = result;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<table>
<tr>
<th>Achieved mark</th>
<th>Grade</th>
</tr>
<tr>
<td>Above 80 (max 100)</td>
<td>A</td>
</tr>
<tr>
<td>60-79</td>
<td>B</td>
</tr>
<tr>
<td>40-59</td>
<td>C</td>
</tr>
<tr>
<td>Below 39 (min 0)</td>
<td>D</td>
</tr>
</table>
<br>
<p>Enter achieved mark:</p>
<input type="input" id="mark" value="73">
<button onclick="myFunction()">GO!</button>
<p>Grade result:</p>
<input type="output" id="grade">

Return a string based on the current grade.
const myFunction = (grade) => {
let mark = null;
if (grade >= 80 && grade <= 100) {
mark = 'A';
} else if (grade >= 60 && grade <= 79) {
mark = 'B';
} else if (grade >= 40 && grade <= 59) {
mark = 'C'
} else if (grade <= 39) {
mark = 'Dude?';
} else {
return false;
}
return mark;
}
const grade = myFunction(60);
console.log(grade);
You can also use this utility if you want to make it shorter.
// Check a range of numbers in an if condition

You can also try below one.
const grades = {
100: 'A',
80: 'B',
60: 'C',
40: 'D'
};
function myFunction() {
const ele = document.getElementById('mark').value;
let grade = 'Invalid input';
for (const g in grades) {
if (parseInt(ele) < parseInt(g)) {
grade = grades[g];
break;
}
}
document.getElementById('grade').value = grade;
}
It has the flexibility to configure the grades and also handling the invalid cases.

How to get remaining days for certain birthday?

When I'm calculating my age, the code below showing "xxx days left for your next birthday". But I want to know, how many days left for my certain birthday. (i.e: I want to know how many days left for my 30th birthday. The result should be like this "xxx days left for your 30th birthday" instead of next birthday.)
What change I need to do?
function wr_document() {
var w = new Date();
var s_d = w.getDate();
var s_m = w.getMonth() + 1;
var s_y = w.getFullYear();
document.cir.len11.value = s_d;
document.cir.len12.value = s_m;
document.cir.len13.value = s_y;
}
function isNum(arg) {
var args = arg;
if (args == "" || args == null || args.length == 0) {
return false;
}
args = args.toString();
for (var i = 0; i < args.length; i++) {
if ((args.substring(i, i + 1) < "0" || args.substring(i, i + 1) > "9") && args.substring(i, i + 1) != ".") {
return false;
}
}
return true;
}
function checkday(aa) {
var val = aa.value;
var valc = val.substring(0, 1);
if (val.length > 0 && val.length < 3) {
if (!isNum(val) || val == 0) {
aa.value = "";
} else if (val < 1 || val > 31) {
aa.value = valc;
}
} else if (val.length > 2) {
val = val.substring(0, 2);
aa.value = val;
}
}
function checkmon(aa) {
var val = aa.value;
var valc = val.substring(0, 1);
if (val.length > 0 && val.length < 3) {
if (!isNum(val) || val == 0) {
aa.value = "";
} else if (val < 1 || val > 12) {
aa.value = valc;
}
} else if (val.length > 2) {
val = val.substring(0, 2);
aa.value = val;
}
}
function checkyear(aa) {
var val = aa.value;
var valc = val.substring(0, (val.length - 1));
if (val.length > 0 && val.length < 7) {
if (!isNum(val) || val == 0) {
aa.value = valc;
} else if (val < 1 || val > 275759) {
aa.value = "";
}
} else if (val.length > 4) {
aa.value = valc;
}
}
function checkleapyear(datea) {
if (datea.getYear() % 4 == 0) {
if (datea.getYear() % 10 != 0) {
return true;
} else {
if (datea.getYear() % 400 == 0)
return true;
else
return false;
}
}
return false;
}
function DaysInMonth(Y, M) {
with(new Date(Y, M, 1, 12)) {
setDate(0);
return getDate();
}
}
function datediff(date1, date2) {
var y1 = date1.getFullYear(),
m1 = date1.getMonth(),
d1 = date1.getDate(),
y2 = date2.getFullYear(),
m2 = date2.getMonth(),
d2 = date2.getDate();
if (d1 < d2) {
m1--;
d1 += DaysInMonth(y2, m2);
}
if (m1 < m2) {
y1--;
m1 += 12;
}
return [y1 - y2, m1 - m2, d1 - d2];
}
function calage() {
var curday = document.cir.len11.value;
var curmon = document.cir.len12.value;
var curyear = document.cir.len13.value;
var calday = document.cir.len21.value;
var calmon = document.cir.len22.value;
var calyear = document.cir.len23.value;
if (curday == "" || curmon == "" || curyear == "" || calday == "" || calmon == "" || calyear == "") {
alert("Please fill all the values and click 'Go'");
} else if (curday == calday && curmon == calmon && curyear == calyear) {
alert("Today your birthday & Your age is 0 years old")
} else {
var curd = new Date(curyear, curmon - 1, curday);
var cald = new Date(calyear, calmon - 1, calday);
var diff = Date.UTC(curyear, curmon, curday, 0, 0, 0) -
Date.UTC(calyear, calmon, calday, 0, 0, 0);
var dife = datediff(curd, cald);
document.cir.val.value = dife[0] + " years, " + dife[1] + " months, and " + dife[2] + " days";
var secleft = diff / 1000 / 60;
document.cir.val3.value = secleft + " minutes since your birth";
var hrsleft = secleft / 60;
document.cir.val2.value = hrsleft + " hours since your birth";
var daysleft = hrsleft / 24;
document.cir.val1.value = daysleft + " days since your birth";
//alert(""+parseInt(calyear)+"--"+dife[0]+"--"+1);
var as = parseInt(calyear) + dife[0] + 1;
var diff = Date.UTC(as, calmon, calday, 0, 0, 0) -
Date.UTC(curyear, curmon, curday, 0, 0, 0);
var datee = diff / 1000 / 60 / 60 / 24;
document.cir.val4.value = datee + " days left for your next birthday";
}
}
function color(test) {
for (var j = 7; j < 12; j++) {
var myI = document.getElementsByTagName("input").item(j);
//myI.setAttribute("style",ch);
myI.style.backgroundColor = test;
}
}
function color1(test) {
var myI = document.getElementsByTagName("table").item(0);
//myI.setAttribute("style",ch);
myI.style.backgroundColor = test;
}
.cal-container {
width: 540px;
margin: 10px auto 0;
}
#age-calculator {
background: none repeat scroll 0 0 #DDDDDD;
border: 1px solid #BEBEBE;
padding-left: 20px;
}
.calc {
border-color: #AAAAAA #999999 #929292 #AAAAAA;
border-style: solid;
border-width: 1px 2px 2px 1px;
padding: 2px 30px 3px;
height: 27px;
}
.calc:active {
border-color: #AAAAAA #999999 #929292 #AAAAAA;
border-style: solid;
border-width: 1px;
}
<title>Age calculator </title>
<body onload="wr_document()">
<div class="cal-container">
<div id="calculator-container">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%px;">
<tbody>
<tr>
<td valign="top">
<h1 style="padding-top: 10px;">
Age Calculator</h1>
<div class="descalign">
<span>Calculate your age in days, years, minutes, seconds. Know how many days are left for your next birthday.</span><br /><br />
</div>
<div id="age-calculator">
<table bgcolor="" border="0" cellpadding="0" cellspacing="4" style="width: 100%px;">
<tbody>
<tr>
<td colspan="2">
<table class="result" style="height: 100%px; width: 100%px;">
<tbody>
<tr>
<td>
<form name="cir">
<table cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td colspan="2">
<br /> Today's Date is:
</td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" name="len11" onkeyup="checkday(this)" size="2" type="text" value="" /> Month -
<input class="innerc resform" name="len12" onkeyup="checkmon(this)" size="2" type="text" value="" /> Year -
<input class="innerc resform" name="len13" onkeyup="checkyear(this)" size="4" type="text" value="" />
<br />
<br />
</td>
</tr>
<tr>
<td colspan="2"> Enter Your Date of Birth : </td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" name="len21" onkeyup="checkday(this)" size="2" type="text" /> Month -
<input class="innerc resform" name="len22" onkeyup="checkmon(this)" size="2" type="text" /> Year -
<input class="innerc resform" name="len23" onkeyup="checkyear(this)" size="4" type="text" />
<br />
<br />
<input class="calc" name="but" onclick="calage()" type="button" value=" Go " />
<br />
<br />
</td>
</tr>
<tr>
<td align="center" class="form" width="30%">
<b> </b>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<b> Your Age is </b>
</td>
<td>
<input class="resform" name="val" readonly="" size="36" type="text" />
</td>
</tr>
<tr>
<td>
<b> Your Age in Days </b>
</td>
<td>
<input class="resform" name="val1" readonly="" size="36" type="text" />
</td>
</tr>
<tr>
<td>
<b> Your Age in Hours </b>
</td>
<td>
<input class="resform" name="val2" readonly="" size="36" type="text" /> (Approximate)
</td>
</tr>
<tr>
<td class="form">
<b> Your Age in Minutes </b>
</td>
<td>
<input class="resform" name="val3" readonly="" size="36" type="text" /> (Approximate)
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td></td>
<td>
<input class="innerc resform" name="val4" readonly="" size="36" type="text" />
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
<br />
</td>
<td> </td>
</tr>
<tr>
<td align="right" colspan="2"> </td>
<td> </td>
</tr>
</tbody>
</table>
<br />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

Not clear about purpose of your whole code, but based on your question following script may help you.
// Let below variables store your birth date
var day = 13;
var month = 03;
var year = 1993;
var x = 30; // Finding 30th birthday
var xthBirthday = new Date((year + x), (month - 1), day); // As month starts with 0
var timeForXthBirthday = xthBirthday.getTime() - Date.now();
var noOfDaysForXthBirthday = Math.ceil(timeForXthBirthday / (1000 * 60 * 60 * 24)); // No. of days left for your xth birthday
document.write(noOfDaysForXthBirthday+" days left for your "+x+"<sup>th</sup> birthday.");
Hope this helps.

JS How to calculate the values of rows in a table?

For example, there is such a table, with cells FootballPlayers, Swimmers, BasketballPlayers and Sum, in which rows are added in turn, how i can count and record in the Total row how many football players, swimmers and basketball players are added?
function deleteRow() {
tg.deleteRow(1);
if (document.all("tg").rows.length == 2) {
document.getElementById("b").disabled=true;
}
}
function addRow() {
var f1 = document.getElementById("f1").value;
var f1k = parseInt(f1);
if (isNaN(f1k)) {
f1k=0;
}
var f2 = document.getElementById("f2").value;
var f2k = parseInt(f2);
if (isNaN(f2k)) {
f2k=0;
}
var f3 = document.getElementById("f3").value;
var f3k = parseInt(f3);
if (isNaN(f3k)) {
f3k=0;
}
var sum1 = (f1k+f2k+f3k);
var row = document.createElement("TR")
var tbody = document.getElementById("tg").insertRow(1);
var r1=tbody.insertCell(0);
r1.innerHTML="";
var r2=tbody.insertCell(1);
r2.innerHTML=f1;
var r3=tbody.insertCell(2);
r3.innerHTML=f2;
var r4=tbody.insertCell(3);
r4.innerHTML=f3;
var r4=tbody.insertCell(4);
r4.innerHTML=sum1;
if(document.all("tg").rows.length >= 3) {
document.getElementById("b").disabled=false;
}
}
#tg {border-collapse:collapse;border-spacing:0;}
#tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg .tg-yw4l{vertical-align:top}
<div class="row">
<label for="n">FootballPlayers: </label>
<input type="text" id="f1" />
</div>
<div class="row">
<label for="n">Swimmers: </label>
<input type="text" id="f2" />
</div>
<div class="row">
<label for="n">BasketballPlayers: </label>
<input type="text" id="f3" />
<button id="a" onClick="addRow();return false;" >Add</button>
<button id="b" onClick="deleteRow();return false;">Delete</button>
</div>
<table id="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e">FootballPlayers</th>
<th class="tg-031e">Swimmers</th>
<th class="tg-yw4l">BasketballPlayers</th>
<th class="tg-yw4l">Sum</th>
</tr>
<tr>
<td class="tg-031e">Total</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
<td class="tg-yw4l"></td>
<td class="tg-yw4l"></td>
</tr>
</table>

Here is an example, only total FootballPlayers
Step 1)
Add a class for FootballPlayers column when you add a row
Step 2)
Call total() javascript function while add a row and delete a row
<div class="row">
<label for="n">FootballPlayers: </label>
<input type="text" id="f1" />
</div>
<div class="row">
<label for="n">Swimmers: </label>
<input type="text" id="f2" />
</div>
<div class="row">
<label for="n">BasketballPlayers: </label>
<input type="text" id="f3" />
<button id="a" onClick="addRow();return false;" >Add</button>
<button id="b" onClick="deleteRow();return false;">Delete</button>
</div>
<table id="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e">FootballPlayers</th>
<th class="tg-031e">Swimmers</th>
<th class="tg-yw4l">BasketballPlayers</th>
<th class="tg-yw4l sum">Sum</th>
</tr>
<tr>
<td class="tg-031e">Total</td>
<td class="tg-031e total_fb_players"></td>
<td class="tg-031e total_summers"></td>
<td class="tg-yw4l total_bb_players"></td>
<td class="tg-yw4l total_sum"></td>
</tr>
</table>
<style>
#tg {border-collapse:collapse;border-spacing:0;}
#tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
#tg .tg-yw4l{vertical-align:top}
</style>
<script>
function deleteRow() {
tg.deleteRow(1);
if (document.all("tg").rows.length == 2) {
document.getElementById("b").disabled=true;
}
total();
}
function addRow() {
var f1 = document.getElementById("f1").value;
var f1k = parseInt(f1);
if (isNaN(f1k)) {
f1k=0;
}
var f2 = document.getElementById("f2").value;
var f2k = parseInt(f2);
if (isNaN(f2k)) {
f2k=0;
}
var f3 = document.getElementById("f3").value;
var f3k = parseInt(f3);
if (isNaN(f3k)) {
f3k=0;
}
var sum1 = (f1k+f2k+f3k);
var row = document.createElement("TR")
var tbody = document.getElementById("tg").insertRow(1);
var r1=tbody.insertCell(0);
r1.innerHTML="";
var r2=tbody.insertCell(1);
r2.classList.add('fb_players')
r2.innerHTML=f1;
var r3=tbody.insertCell(2);
r3.classList.add('summers')
r3.innerHTML=f2;
var r4=tbody.insertCell(3);
r4.classList.add('bb_players')
r4.innerHTML=f3;
var r5=tbody.insertCell(4);
r5.classList.add('sum')
r5.innerHTML=sum1;
if(document.all("tg").rows.length >= 3) {
document.getElementById("b").disabled=false;
}
total();
}
function total() {
var fb_players = document.getElementsByClassName("fb_players");
var total_fb_players = 0;
for(var i = 0; i < fb_players.length; i++) {
var v = parseInt(fb_players[i].innerHTML);
if (isNaN(v)) {
v=0;
}
console.log(v);
total_fb_players += v;
}
console.log(total_fb_players);
var total_fb_players_html = document.querySelector(".total_fb_players");
total_fb_players_html.innerHTML=total_fb_players;
}
</script>

Add classes to your cells and ids to for each total column in your table and execute as follows
Snippet below
function deleteRow() {
tg.deleteRow(1);
if (document.all("tg").rows.length == 2) {
document.getElementById("b").disabled = true;
}
}
function addRow() {
var f1 = document.getElementById("f1").value;
var f1k = parseInt(f1);
if (isNaN(f1k)) {
f1k = 0;
}
var f2 = document.getElementById("f2").value;
var f2k = parseInt(f2);
if (isNaN(f2k)) {
f2k = 0;
}
var f3 = document.getElementById("f3").value;
var f3k = parseInt(f3);
if (isNaN(f3k)) {
f3k = 0;
}
var sum1 = (f1k + f2k + f3k);
var row = document.createElement("TR")
var tbody = document.getElementById("tg").insertRow(1);
var r1 = tbody.insertCell(0);
r1.innerHTML = "";
var r2 = tbody.insertCell(1);
r2.innerHTML = f1;
r2.className = "football";
var r3 = tbody.insertCell(2);
r3.innerHTML = f2;
r3.className = "swimmer";
var r4 = tbody.insertCell(3);
r4.innerHTML = f3;
r4.className = "basketball";
var r4 = tbody.insertCell(4);
r4.innerHTML = sum1;
if (document.all("tg").rows.length >= 3) {
document.getElementById("b").disabled = false;
}
var football_el = document.getElementsByClassName("football");
var swim_count_el = document.getElementsByClassName("swimmer");
var basketball_el = document.getElementsByClassName("basketball");
var list = [football_el, swim_count_el, basketball_el];
grand_sum = 0;
for (var y = 0; y < list.length; ++y) {
var sum = 0;
for (var x = 0; x < list[y].length; ++x) {
sum += Number(list[y][x].innerHTML);
}
if (y == 0) {
document.getElementById("total_footballers").innerHTML = sum;
grand_sum += sum;
} else if (y == 1) {
document.getElementById("total_swimmers").innerHTML = sum;
grand_sum += sum;
} else if (y == 2) {
document.getElementById("total_basketballers").innerHTML = sum;
grand_sum += sum;
}
} //end for
document.getElementById("grandtotal").innerHTML = grand_sum;
}
#tg {
border-collapse: collapse;
border-spacing: 0;
}
#tg td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
#tg th {
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: normal;
padding: 10px 5px;
border-style: solid;
border-width: 1px;
overflow: hidden;
word-break: normal;
}
#tg .tg-yw4l {
vertical-align: top
}
<div class="row">
<label for="n">FootballPlayers: </label>
<input type="text" id="f1" />
</div>
<div class="row">
<label for="n">Swimmers: </label>
<input type="text" id="f2" />
</div>
<div class="row">
<label for="n">BasketballPlayers: </label>
<input type="text" id="f3" />
<button id="a" onClick="addRow();return false;">Add</button>
<button id="b" onClick="deleteRow();return false;">Delete</button>
</div>
<table id="tg">
<tr>
<th class="tg-031e"></th>
<th class="tg-031e">FootballPlayers</th>
<th class="tg-031e">Swimmers</th>
<th class="tg-yw4l">BasketballPlayers</th>
<th class="tg-yw4l">Sum</th>
</tr>
<tr>
<td class="tg-031e">Total</td>
<td class="tg-031e" id="total_footballers"></td>
<td class="tg-031e" id="total_swimmers"></td>
<td class="tg-yw4l" id="total_basketballers"></td>
<td class="tg-yw4l" id="grandtotal"></td>
</tr>
</table>

Calculating 0% Interest?

Good evening! I'm teaching myself to code. Right now, I'm making a JavaScript loan calculator, but I hit a snag. If I put 0% interest, it displays nothing in my output textboxes. Everything else is working perfectly though. Any help would be appreciated. Thanks!
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Loan Calculator</title>
<style type="text/css">
.auto-style1 {
text-align: left;
}
.auto-style2 {
font-size: larger;
color: #FFF;
font: Georgia;
}
.auto-style3 {
width: 82px;
text-align: center;
style="float: right;
}
table {
background-color: #F5F5F5;
width: 400px;
height: 300px;
padding-left: 20px;
padding-bottom: 20px;
padding-top: 20px;
}
body {
background-color: #d2691e;
}
</style>
</head>
<body>
<form name="loaninfo">
<div class="auto-style1">
<p><strong>
<span class="auto-style2"> </span></strong><strong><span class="auto-style2"><br />
</span></strong></p>
</div>
<table width="327">
<tr><td colspan="3"></td></tr>
<tr>
<td>Loan Amount:</td>
<td>
$
<input type="text" name="principal" size="12" title="textfield" pattern="([0-9]+\.)?[0-9]+" >
</td>
</tr>
<tr>
<td>Interest Rate:</td>
<td>
<input type="text" name="interest" size="12" title="textfield" pattern="([0-9]+\.)?[0-9]+" >
%
</td>
</tr>
<tr>
<td>Number of Years for Loan:</td>
<td>
<input type="text" name="years" size="12" title="textfield" pattern="([0-9]+\.)?[0-9]+" >
</td>
</tr>
<tr>
<td colspan="3"><input type="button" class="auto-style3" onClick="calculate();" value="Calculate">
<br />
<br />
</td>
</tr>
<tr>
<td colspan="3">
<b>Your Payment Information</b>
</td>
</tr>
<tr>
<td>Monthly Payment Amount:</td>
<td>$ <input type="text" name="payment" size="12" readonly /></td>
</tr>
<tr>
<td>Total Payment Amount:</td>
<td>$ <input type="text" name="total" size="12" readonly ></td>
</tr>
<tr>
<td>Total Interest Payments:</td>
<td>$ <input type="text" name="totalinterest" size="12" readonly /> </td>
</tr>
<tr>
<td colspan="3">
<input type="reset" class="auto-style3" />
</td>
</tr>
</table>
</form>
<script language="JavaScript">
function calculate() {
var principal = document.loaninfo.principal.value;
var months_in_year = 12
var interest = document.loaninfo.interest.value / 100 / months_in_year;
var payments = document.loaninfo.years.value * months_in_year;
var x = Math.pow(1 + interest, payments);
var monthval = (principal*x*interest)/(x-1);
if (!isNaN(monthval) &&
(monthval != Number.POSITIVE_INFINITY) &&
(monthval != Number.NEGATIVE_INFINITY)) {
document.loaninfo.payment.value = round(monthval);
document.loaninfo.total.value = round(monthval * payments);
document.loaninfo.totalinterest.value = round((monthval * payments) - principal);
}
else {
document.loaninfo.payment.value = "";
document.loaninfo.total.value = "";
document.loaninfo.totalinterest.value = "";
}
function round(x) {
return Math.round(x*100)/100;
}
function jsDecimals(e) {
var evt = (e) ? e : window.event;
var key = (evt.keyCode) ? evt.keyCode : evt.which;
if (key != null) {
key = parseInt(key, 10);
if ((key < 48 || key > 57) && (key < 96 || key > 105)) {
if (!jsIsUserFriendlyChar(key, "Decimals")) {
return false;
}
}
else {
if (evt.shiftKey) {
return false;
}
}
}
return true;
}
form.onsubmit = function () {
return textarea.value.match(/^\d+(\.\d+)?$/);
}
</script>

When you put 0 you are getting
var x = Math.pow(1 + interest, payments); // 1
var monthval = principal * x * interest / (x - 1); //NaN because 1-1 in fraction is 0 so it returns 0/0 and it's NaN
you can change you code to be like this:
if (interest===0){
var monthval = (principal)/(months_in_year);
} else {
var monthval = (principal*x*interest)/(x-1);
}
Working Version: http://codepen.io/mhadaily/pen/ZpypdA
feel free to change it to be like what you want.

It's because of this section of code.
else if (interest == 0) {
document.loaninfo.payment.value = "";
document.loaninfo.total.value = "";
document.loaninfo.totalinterest.value = "";
}
When the interest is 0, you are setting the values of all your output boxes to an empty string.
You should replace the RHS of the assignment.

Using JavaScript to Open iFrame form success in parent window

We are currently using JavaScript to process our forms, but the form is contained in an iFrame, which opens the success result URL in the iFrame. We would like the success result (once form is filled in) to point to the parent frame...
Script for form:
<script>try
{
var lastSubmission = null;
var ContactId = 0; var _wow;
var CaptureId = 12;
var PageId = 0;
var EmailId = 0;
var CampaignName = '';
var IsNewContact = false;
var IsTest = false;
var IsUserValid;
var gatorLeadsTrackingOptions = 0;
}catch(e){}
errorMessage.innerHTML ='';
successMessage.innerHTML ='';
function GatorTrim(x) { return x.replace(/^\s+|\s+$/gm,'');};function CaptureFormData()
{
if(lastSubmission != null){
secondsSinceLastSubmission = (new Date().getTime() - lastSubmission) / 1000
if(secondsSinceLastSubmission < 1) {
return;
}
}
var Value;
var CheckSelection = false;
var result;
var ButtonId = 6;
var submissionData = {
captureId: CaptureId,
buttonId: ButtonId,
pageId: PageId,
emailId: EmailId,
campaignName: CampaignName,
contactId: ContactId,
isTest: IsTest,
sendNotificationEmail: false,
passGatorLeadsTrackingDataInRedirectUrl: true,
onlyOneEntry: false,
displayName: 'Volo Not got a code',
emailAddress: '',
values: [],
gatorLeadsTrackingOptions: gatorLeadsTrackingOptions
};
document.getElementById('CaptureControlButton_6_').disabled = true;
document.getElementById('CaptureControlButton_6_').value = 'Submitting, please wait';
setTimeout(function() {try{errorMessage.innerHTML = '';
successMessage.innerHTML = '';
Value = getObject('CaptureControl_4_').value;
if(Value==''){errorMessage.innerHTML += 'The email address field is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
Value = getObject('CaptureControl_5_').value;
if(Value==''){errorMessage.innerHTML += 'Mandatory fields missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
Value = getObject('CaptureControl_3_').value;
if(Value==''){errorMessage.innerHTML += 'The field name company name is missing<br>';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
if(errorMessage.innerHTML != ''){return;}
Value = GatorTrim(getObject('CaptureControl_4_').value);
submissionData.emailAddress = Value;
Value = GatorTrim(getObject('CaptureControl_5_').value);
if (Value != undefined) {submissionData.values.push({controlId: 5, value: Value });
}
Value = GatorTrim(getObject('CaptureControl_6_').value);
if (Value != undefined) {submissionData.values.push({controlId: 6, value: Value });
}
Value = GatorTrim(getObject('CaptureControl_3_').value);
if (Value != undefined) {submissionData.values.push({controlId: 3, value: Value });
}
var result = WebCapture.Submit(JSON.stringify(submissionData));
var response = JSON.parse(result.value);
if(response.success==false){errorMessage.innerHTML = 'You have already submitted.';
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
return;}
trackingData = response.trackingData;
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
successMessage.innerHTML = 'Thank you for submitting ';
if(typeof _wow != 'undefined' && response.trackWowSubmit){
trackUrlInWow(response.wowUrl);}
var submitRedirectUrl = 'http://takeflight.volocommerce.com/multichannel-selling/'
if(submitRedirectUrl.indexOf('?') == -1){
submitRedirectUrl = submitRedirectUrl + '?';
}else{
submitRedirectUrl = submitRedirectUrl + '&';
}
submitRedirectUrl += 'gator_td=' + trackingData;
window.location.href=submitRedirectUrl;
}catch(e){if(IsTest) { alert(e.message); } else { alert('An error has occurred submitting the data. Please try again.'); }
document.getElementById('CaptureControlButton_6_').disabled = false;
document.getElementById('CaptureControlButton_6_').value = 'Send';
}
lastSubmission = new Date().getTime();
}, 100);
}</script>
The form (contained in an iframe on our page)
<style>
body {
background: #fff;
color:#000;
font-family: ‘open sans’, sans-serif;
}
input[type=text], input[type=button] {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 5px;
height: 40px;
border: 1px solid #f1f1f1;
}
input[type=button] {
background-color: #F04D1D;
height: 45px;
font-weight: bold;
color: #FFF;
font-size: 16px;
}
</style>
<table style="width: 300px; background-color: rgb(255, 255, 255);"><base target="_parent" />
<tbody>
<tr>
<td style="text-align: center;"><font color="#f04d1d"><strong><span style="font-family: '‘open sans’', sans-serif, ';'; font-size: 24px;">GET YOUR CODE </span></strong></font></td>
</tr>
<tr>
<td><span style="color: rgb(242, 242, 242);"> </span></td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>First Name* </td>
<td><span style="color: rgb(0, 0, 0);">Last Name*</span></td>
</tr>
<tr>
<td><input name="First Name" id="CaptureControl_5_" type="text" value=""></td>
<td><input name="Last Name" id="CaptureControl_6_" type="text" value=""></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">Company Name*</span></td>
</tr>
<tr>
<td><input name="Company Name" id="CaptureControl_3_" type="text" value="" style="width: 300px;"></td>
</tr>
<tr>
<td><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0);"> </span><span style="color: rgb(0, 0, 0);">Your Email*</span></td>
</tr>
<tr>
<td><input name="Email Address" id="CaptureControl_4_" type="text" value="" style="width: 300px;"><br>
</td>
</tr>
<tr>
<td><span style="color: rgb(242, 242, 242);"> </span></td>
</tr>
<tr>
<td><input id="CaptureControlButton_6_" type="button" value="Send" onclick="try{CaptureFormData(0);}catch(e){}" style="width: 300px;"><br>
<div id="errorMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:red;">Error Message Area</div>
<div id="successMessage" style="width:135;height:10;font-family:Verdana;font-size:8pt;color:#000000;">Success Message Area</div>
</td>
</tr>
<tr>
<td><span style="color: rgb(0, 0, 0); font-size: 10px;"><em>*Required field</em></span></td>
</tr>
</tbody>
</table>
<br>
<br>
Note The form is on a different URL/domain to our main website, where the content is held.

Just use window.top.location to change whole page not only iframe part.