Develop Reference

How to add and delete new row with new values each time using JavaScript?

I have been given a task to make 2 HTML pages, one with form where the user enter his/her contact information and another where the user's information are viewed in a table.
I just need to use these languages only (JavaScript, jquery, HTML, CSS ,bootstrap); no use of PHP/JSP, only client-side language
and no database should be used. Up until now I have done this much.
$(function()
{
$('#form').validate(
{
rules:
{
email:
{required:true,
email:true
},
gender:
{required:true
},
cont:{
required:true,
number:true}
}
})
});
function onsumit(){
localStorage.setItem("input0",1);
var ip=document.getElementById("name");
localStorage.setItem("input1", ip.value);
var ip2=document.getElementById("email");
localStorage.setItem("input2", ip2.value);
var ip3=document.getElementById("cont");
localStorage.setItem("input3", ip3.value);
var ip4=document.getElementById("gender");
localStorage.setItem("input4", ip4.value);
var ip5=document.getElementById("comment");
localStorage.setItem("input5", ip5.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js"
type="text/javascript"></script>
<div class="divmid text-center" id="divmid" >
<p id="head"></p>
<a> CONTACT FORM</a>
<form class="table-responsive" id="form" name="form" action="next.html" method="get" onsubmit="onsumit()" >
<table>
<tr>
<td>NAME:</td>
<td><input type="text" name="name" id="name"required>*<p id="p1"></p></td>
</tr>
<tr>
<td>Contcat no:</td>
<td><input type="text" size="10" name="cont" id="cont"required>*<p id="p2"></p></td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text" name="email" id="email"required>*<p id="p3"></p></td>
</tr>
<tr>
<td>Gender:</td>
<td><select id="gender" name="gender" required>
<option value="" >SELECT</option>
<option value="male">MALE</option>
<option value="female">FEMALE</option>
</select>*<p id="p4"></p></td>
</tr>
<tr>
<td>comments:</td>
<td> <textarea class="form-control" rows="5" id="comment" maxlength="100"></textarea>
</td>
</tr>
</table>
<label><input id="submit" type="submit" value="SUBMIT"></label>
</form>
</div>
now this is the second html page.
function load(){
var table = document.getElementById("tab2");
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;
var validate_Noof_columns = (colCount - 1);
var row = table.insertRow(1);
for(var i=0; i < colCount; i++) {
var text = localStorage.getItem("input"+i);
var newcell = row.insertCell(i);
if(i == (colCount - 1)) {
newcell.innerHTML = "<INPUT type='button' value='X' id='work' onclick='removeLine(this)'/><INPUT type='button' value='&' onclick='removeRow(this)'/>"; break;
} else {
newcell.innerHTML = text;
}
}
function removeLine(lineItem) {
var row = lineItem.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function removeRow(onclickTAG) {
// Iterate till we find TR tag.
while ( (onclickTAG = onclickTAG.parentElement) && onclickTAG.tagName != 'TR' );
onclickTAG.parentElement.removeChild(onclickTAG);
}
}
body {
font: 20px Montserrat, sans-serif;
line-height: 1.8;
color: black;
}
p {font-size: 16px;}
.margin {margin-bottom: 45px;}
.bg-1 {
background-color: #1abc9c; /* Green */
color: #ffffff;
}
.bg-2 {
background-color: #474e5d; /* Dark Blue */
color: #ffffff;
}
.bg-3 {
background-color: #ffffff; /* White */
color: #555555;
}
.bg-4 {
background-color: #2f2f2f; /* Black Gray */
color: #fff;
}
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
.navbar {
padding-top: 15px;
padding-bottom: 15px;
border: 0;
border-radius: 0;
margin-bottom: 0;
font-size: 12px;
letter-spacing: 5px;
}
.navbar-nav li a:hover {
color: #1abc9c !important;
}
#divmid {
margin:20px;
padding:20px;
border:3px solid red;
}
table{
text-align:left ;
}
th, td {
padding: 20px;
text-align:left;
}
textarea{
max-height:300px;
resize:none;
}
#div1{
text-align:center;
}
#tab2 {
text-align:left ;
border:2px solid red;
margin-left:auto;
margin-top:40px;
margin-bottom:200px;
}
#pick{
padding:100px;
}
<style>
table, td,th{
border: 1px solid black;
}
</style>
<body onload="load()">
<div id="div1">
<span id="div2">CONTACT LIST</span>
<table id="tab2">
<tr>
<th>S No.</th>
<th>NAME</th>
<th>CONTACT</th>
<th>EMAIL</th>
<th>GENDER</th>
<th>COMMENTS</th>
<th>EDIT</th>
</tr>
</table>
</div>
</body>
The problem is I need to create a row in second page each time a user input with the new values in the form, but what in have done, it only creating one row and always updating it with the new values. Though I have used Local storage but still I am stuck here.

The problem is in the line 6 of your code. The parameter 1 passed to the insertRow function instantiates the variable row with the first row of your table. This way, every time you use insertCell in the row variable it updates the value on this first row. I think switching to rowCount + 1 will do the job.
function load(){
var table = document.getElementById("tab2");
var rowCount = table.rows.length;
var colCount = table.rows[0].cells.length;
var validate_Noof_columns = (colCount - 1);
var row = table.insertRow(rowCount + 1);
for(var i=0; i < colCount; i++) {
var text = localStorage.getItem("input"+i);
var newcell = row.insertCell(i);
if(i == (colCount - 1)) {
newcell.innerHTML = "<INPUT type='button' value='X' id='work' onclick='removeLine(this)'/><INPUT type='button' value='&' onclick='removeRow(this)'/>"; break;
} else {
newcell.innerHTML = text;
}
}
function removeLine(lineItem) {
var row = lineItem.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function removeRow(onclickTAG) {
// Iterate till we find TR tag.
while ( (onclickTAG = onclickTAG.parentElement) && onclickTAG.tagName != 'TR' );
onclickTAG.parentElement.removeChild(onclickTAG);
}
}

take a look at this code. I think it should be what you are looking for.
Everytime the form is submitted, I first get the value of the local storage and add the new entry as JSON.
On the other page, I get the local storage, transform the value to get an object from the JSON string and use that object to show the informations inside the table.
Hope this help!
First Page :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function onsumit() {
if (typeof(Storage) !== "undefined") {
// Exemple of str : {'d' : [{'name':'Mister A','cont':'1',email':'MisterA#test.com'},{'name':'Mister B','cont':'1','email':'MisterB#test.com'}]}
var str = localStorage.getItem("contactinformation");
var contactModel;
if (str !== '') {
contactModel = JSON.parse(str);
} else {
contactModel = {
d : []
};
}
contactModel.d[contactModel.d.length] = {
name:$('#name').val(),
cont:$('#cont').val(),
email:$('#email').val()
}
localStorage.setItem("contactinformation",JSON.stringify(contactModel));
return true;
} else {
// Sorry! No Web Storage support..
return false;
}
}
</script>
</head>
<body>
<div class="divmid text-center" id="divmid" >
<p id="head"></p>
<a>CONTACT FORM</a>
<form id="form" name="form" action="next.html" method="get" onsubmit="return onsumit();">
<table>
<tr>
<td>NAME:</td>
<td><input type="text" name="name" id="name">*</td>
</tr>
<tr>
<td>Contcat no:</td>
<td><input type="text" size="10" name="cont" id="cont">*</td>
</tr>
<tr>
<td>EMAIL:</td>
<td><input type="text" name="email" id="email">*</td>
</tr>
</table>
<input id="submit" type="submit" value="SUBMIT">
</form>
</div>
</body>
</html>
Second Page :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, td,th{
border: 1px solid black;
}
</style>
</head>
<body>
<div id="div1">
<span id="div2">CONTACT LIST</span>
<table id="tab2">
<tr>
<th>NAME</th>
<th>CONTACT</th>
<th>EMAIL</th>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
if (typeof(Storage) !== "undefined") {
var str = localStorage.getItem("contactinformation");
var info = JSON.parse(str);
if (typeof(info.d) !== "undefined") {
for (var x=0;x<info.d.length;x++) {
$('#tab2').append('<tr><td>' + info.d[x].name + '</td><td>' + info.d[x].cont + '</td><td>' + info.d[x].email + '</td></tr>');
}
}
}
});
</script>
</body>
</html>

Javascript Validation not working properly [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 6 years ago.
when i click on submit button nothing happen.
error showing:
Form.js:102
Uncaught TypeError: Cannot set property 'onsubmit' of null.
cannot understand properly......
// JavaScript Document
function validate()
{
var x = document.forms["myForm"]["ide"].value;
var regex = /^[1-9]{1}[0-9]{9}$/;
if (x == null || x == "")
{
alert("Enter Your ID Number");
return false;
}
else if (!regex.test(x))
{
alert("ID Contain Numbers Only");
return false;
}
var x = document.forms["myForm"]["EName"].value;
var regex = /^[A-Za-z]+$/;
if (x == null || x == "")
{
alert("Enter Your Employee Name");
return false;
}
else if (!regex.test(x))
{
alert("Employee Name Contain Alphabets Only");
return false;
}
var x = document.forms["myForm"]["myEmail"].value;
if (x == null || x == "")
{
alert("Enter Your Email Id")
return false;
}
if((document.myForm.gender[0].checked==false)&&(document.myForm.gender[1].checked==false))
{
document.myForm.gender[0].focus();
alert("Please select a gender.");
return false;
}
var x = document.forms["myForm"]["Cnum"].value;
var regex = /^[1-9]{1}[0-9]{9}$/;
if(x == null || x == "")
{
alert("Please enter the Contact number.");
return false;
}
else if(isNaN(x))
{
alert("Contact number should contain only digits.");
return false;
}
else if(x.length!=10)
{
alert("Contact number should contain only 10 digits.(Mobile number)");
return false;
}
else if(!regex.test(x))
{
alert("Invalid Contact number.");
return false;
}
var x = document.forms["myForm"]["desig"].value;
var regex = /^[A-Za-z]+$/;
if (x == null || x == "")
{
alert("Enter Your Designation");
return false;
}
else if (!regex.test(x))
{
alert("Designation Contain Alphabets Only");
return false;
}
var x = document.forms["myForm"]["quali"].value;
var regex = /^[A-Za-z]+$/;
if (x == null || x == "")
{
alert("Enter Your Qualification");
return false;
}
else if (!regex.test(x))
{
alert("Qualification Contain Alphabets Only");
return false;
}
var x = document.forms["myForm"]["depart"].value;
if (x == null || x == "")
{
alert("Select Department");
return false;
}
}
document.getElementById("myForm").onsubmit = function ()
{
return validate(this);
};
body
{
background-image:url(img/one.jpg);
background-size:cover;
margin-left: 0px;
margin-right: 0px;
display:flex;
}
table
{
padding-top: 50px;
margin: -36px 0px 0px 124px;
}
td
{
padding: 0px 40px 0px 0px;
}
p
{
font-family: Corbel;
margin: 16px 0px 0px 0px;
font-size: 20px;
color: white;
}
.text
{
font-weight: bold;
}
.sumbit
{
margin: 30px 0px 0px 58px;
padding: 12px 0px 12px 0px;
font-size: 26px;
background-color: black;
color: white;
border: 1px solid black;
width: 674px;
}
.choose
{
color:white;
}
.hobby
{
margin-left:10px;
}
.area
{
border: 0px solid;
border-radius: 12px;
padding: 6px 6px 6px 6px;
}
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<link rel="stylesheet" href="PHP_Form.css" type="text/css">
</head>
<body>
<div>
<img src="img/2-1.png" style="height:658px"; width="109%">
</div>
<script type="text/javascript" src="PHP_Form.js"></script>
<div>
<form method="post" name="myForm" action="" id="myForm">
<table>
<tr>
<td class="text"><p>ID</p></td>
<td><p><input type="text" name="ide" class="area"></p></td>
</tr>
<tr>
<td class="text"><p>Emplyoee Name</p></td>
<td><p><input type="text" name="EName" class="area"></p></td>
</tr>
<tr>
<td class="text"><p>Designation</p></td>
<td><p><input type="text" name="desig" class="area"></p></td>
</tr>
<tr>
<td class="text"><p>Department</p></td>
<td><p>
<select class="area" id="depart">
<option value="hr">HR</option>
<option value="manager">Manager</option>
<option value="operation">Operation</option>
<option value="administrator">Administrator</option>
</select>
</p></td>
</tr>
<tr>
<td class="text"><p>Gender</p></td>
<td><p class="choose">
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female
</p></td>
</tr>
<tr>
<td class="text"><p>Qualification</p></td>
<td><p><input type="text" name="quali" class="area"></p></td>
</tr>
<tr>
<td class="text"><p>Hobbies</p></td>
<td><p class="choose">
<input type="checkbox" name="hobby" value="read">Reading
<input type="checkbox" name="hobby" value="play" class="hobby">Playing
<input type="checkbox" name="hobby" value="sing" class="hobby">Singing
<input type="checkbox" name="hobby" value="dance" class="hobby">Dancing
</p></td>
</tr>
<tr>
<td class="text"><p>Email id</p></td>
<td><p><input type="email" name="email" id="myEmail" class="area" pattern="[a-z0-9._%+-]+#[a-z0-9.-]+\.[a-z]{2,3}$"></p></td>
</tr>
<tr>
<td class="text"><p>Contact</p></td>
<td><p><input type="text" name="Cnum" class="area"></p></td>
</tr>
<tr>
<td class="text"><p>Resposibilities</p></td>
<td><p><textarea id="respons" name="respons" rows="6" cols="22" class="area"></textarea></p></td>
</tr>
</table>
<input type="submit" value="Submit" class="sumbit">
</form>
</div>
</body>
</html>
Name of my file is :
Form.html
Form.js
Form.css

you execute your script before page is loaded so that
document.getElementById("myForm") returns undefined
easiest solution to fix this would be to move your
<script type="text/javascript" src="PHP_Form.js"></script>
just before </body>
if you want better solution - use DOMContentLoaded event

Reset board on Tic-Tac-Toe

I'm trying my hand at building a tic-tac-toe game with plain vanilla Javascript, so I'm hoping we can stay in the boundaries of keeping it simple Javascript. Do not optimize code, trying to learn the hard way!
What I require is the following: After all squares have been filled, an alert box appears "All squares filled!" <-- This part is done. After the user clicks on the OK box, a reset button appears towards the bottom of the board. This reset button will reset the board so the game can be played again. After clicking the reset button, the board should reset and the reset button should disappear.
I have started the function called 'function resetButton'. If you need further clarification, please advise.
Thank you!
Here is the code I have got so far:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tic Tac Toe</title>
<style>
td {
border: 1px solid black;
height: 250px;
width: 250px;
font-family: sans-serif;
font-size: 150pt;
text-transform: uppercase;
}
</style>
</head>
<body>
<table>
<tr>
<td align="center" id="square1" onclick="displayMarker('square1');"></td>
<td align="center" id="square2" onclick="displayMarker('square2');"></td>
<td align="center" id="square3" onclick="displayMarker('square3');"></td>
</tr>
<tr>
<td align="center" id="square4" onclick="displayMarker('square4');"></td>
<td align="center" id="square5" onclick="displayMarker('square5');"></td>
<td align="center" id="square6" onclick="displayMarker('square6');"></td>
</tr>
<tr>
<td align="center" id="square7" onclick="displayMarker('square7');"></td>
<td align="center" id="square8" onclick="displayMarker('square8');"></td>
<td align="center" id="square9" onclick="displayMarker('square9');"></td>
</tr>
</table>
<script>
var cp1 = 1;
function displayMarker(allSquares) {
if (document.getElementById(allSquares).innerHTML != "") {
alert("Choose another square");
}
else {
if (cp1 == 1) {
document.getElementById(allSquares).innerHTML = "X";
cp1 = 2;
}
else {
document.getElementById(allSquares).innerHTML = "O";
cp1 = 1;
}
}
checkEmpty();
}
function checkEmpty() {
var anyEmpty = false;
for (var i = 1; i <= 9; i++) {
if (document.getElementById('square' + i).innerHTML == "") {
anyEmpty = true;
}
}
if (!anyEmpty)
alert("All squares filled!");
resetButton();
}
function resetButton() {
var button = document.createElement("button");
button.innerHTML = "Reset";
button.addEventListener("click", function () {
alert("Board Reset");
});
}
</script>
</body>
</html>

Try something like this..
button.addEventListener("click", function () {
var tds = document.getElementsByTagName('td');
for(var i = 0; i < tds.length; i++) {
tds[i].innerHTML = ''
}
});

Autocomplete the numbers

I need to expand this code to make it so I have 9 x 9 board and when I put some nunbers in it then press the button it completes the 9x9 with numbers unique in line and column
<meta charset="utf-8">
<style>
input { font-size: 20px; width: 30px; text-align: center; }
</style>
<h1 id="a"></h1>
<button type="button" id="b" onClick="uzup()">uzupe�nij</button>
for( i=1; i<6; i++ ) {
document.getElementById('a').innerHTML += '<input id="a' + i + '" maxlength="1" pattern="^[1-5]$">';
}
function uzup() {
for(i=1;i<6;i++){
w = document.getElementById('a'+i).value;
if( w == '' ) {
w = Number(w);
for(j=1;j<6;j++){
jest = false;
for(k=1;k<6;k++){
w = document.getElementById('a'+k).value;
if( w != '' ){
if( Number(w) == j ) jest = true;
}
}
if( !jest ) {
document.getElementById('a'+i).value = j; break;
}
}
}
}
}

I don't know if I got it right. With an input like this
1 3 _
4 _ 5
5 _ 2
you want a result like this?
1 3 4
4 1 5
5 4 2
is that correct?
I tried to do it in the most obvious and legible way (real code would do it in about 10% of that amount of lines but would have the legibility of a well designed Perl script ;-) and I hope you understand the flow without extensive comments.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Nine By Nine</title>
<script type="text/javascript">
function clearTable(){
for(var i = 0; i<9; i++){
document.getElementById("c"+i).style.border = "1px solid grey";
document.getElementById("i"+i).value = "";
}
}
// Some checks & balances omitted!
function fillUp(){
var m = [],d,c,r;
var gotoError = function(idx){
document.getElementById("c"+idx).style.border = "1px solid red";
};
var checkField = function(n, row, col){
for(var i=0;i<3;i++){
if(i !== col && m[row * 3 + i] === n)
return false;
}
for(var i=0;i<3;i++){
if(i !== row && m[col + 3 * i] === n)
return false;
}
return true;
};
var resetTable = function(){
for(var i = 0; i<9; i++){
m[i] = -1;
document.getElementById("c"+i).style.border = "1px solid grey";
}
};
resetTable();
for(var i = 0; i<9; i++){
var val = document.getElementById("i"+i).value;
if(val){
d = parseInt(val);
if(isNaN(d)){
gotoError(i);
return;
}
c = i%3;
r = Math.floor(i/3);
if(!checkField(d,r,c)){
gotoError(i);
return;
}
m[i] = d;
}
}
for(var i=0;i<9;i++){
if(m[i] === -1){
for(var j = 1;j<6;j++){
c = i%3;
r = Math.floor(i/3);
if(checkField(j,r,c)){
document.getElementById("i"+i).value = j;
m[i] = j
break;
}
}
}
}
}
window.addEventListener('submit', function(ev) {
ev.preventDefault();
fillUp();
}, false)
</script>
<style type="text/css">
table {
padding: 1em 1em 1em 1em;
background-color: lightgreen;
}
td {
border: 1px solid grey;
padding: 5px 5px 5px 5px;
margin: 5px 5px 5px 5px;
background-color: lighgrey;
}
input {
width: 1.1em;
height: 1.1em;
text-align:center;
}
</style>
</head>
<body>
<form id="form0">
<table id="table0">
<tr id="r0">
<td id="c0"><input id="i0" maxlength="1" pattern="^[1-5]$"></td>
<td id="c1"><input id="i1" maxlength="1" pattern="^[1-5]$"></td>
<td id="c2"><input id="i2" maxlength="1" pattern="^[1-5]$"></td>
</tr>
<tr id="r1">
<td id="c3"><input id="i3" maxlength="1" pattern="^[1-5]$"></td>
<td id="c4"><input id="i4" maxlength="1" pattern="^[1-5]$"></td>
<td id="c5"><input id="i5" maxlength="1" pattern="^[1-5]$"></td>
</tr>
<tr id="r2">
<td id="c6"><input id="i6" maxlength="1" pattern="^[1-5]$"></td>
<td id="c7"><input id="i7" maxlength="1" pattern="^[1-5]$"></td>
<td id="c8"><input id="i8" maxlength="1" pattern="^[1-5]$"></td>
</tr>
</table>
<button id="bt0" type="button" onclick="fillUp()">Fill Up</button>
<button id="bt1" type="button" onclick="clearTable()">Clear Table</button>
<form>
</body>
</html>

Javascript Onload expected object error

I'm getting "scrollingMsg" is undefined. It's not the cause though; it was functioning before I started doing the validSalesAmt() function. Beside that, not sure if this will help find the bug, but clicking the fields in the form gave an error saying that function wasn't defined. Please, no recommendations 'you can do it this way instead' because this is an assignment for school that has to be done as is in the textbook.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter 10 Shoreline State Bank</title>
<script type="text/javascript">
var adMsg = " **Did you know some used cars can have 100% loan value? Ask for details! **"
var beginPos = 0
function scrollingMsg()
{
msgForm.scrollingMsg.value=adMsg.substring(beginPos,adMsg.length)+adMsg.substring(0,beginPos)
beginPos=beginPos+1
if (beginPos>adMsg.length)
{
beginPos=0
}
window.setTimeout("scrollingMsg()",200)
}
var salesAmt
var loanAmt
var loanRate
var loanYears
function validSalesAmt()
{
var salesAmt=parseInt(homeLoanForm.SaleAmount.value,10)
if(isNaN(salesAmt)||(salesAmt <= 0))
{
alert("The sales price is not a valid number!")
homeLoanForm.SaleAmount.value = ""
homeLoanForm.SaleAmount.focus()
}
else
{
var downPmtAmt=parseInt(homeLoanForm.DownPayment.value, 10)
if(isNaN(downPmtAmt)||(downPmtAmt<=0)||(downPmtAmt>salesAmt))
{
alert("The down payment should be greater than 0 and less than the sales amount!")
homeLoanForm.DownPayment.value=""
homeLoanForm.DownPayment.focus()
}
else
{
loanAmt = salesAmt-downPmtAmt
homeLoanForm.LoanAmount.value=loanAmt
homeLoanForm.Rate.focus()
}
}
}
function CalcLoanAmt()
{
loanRate=parseFloat(homeLoanForm.Rate.value)
if (isNaN(loanRate) || (loanRate <= 0))
{
alert("The interest rate is not a valid number!")
homeLoanForm.Rate.value=""
homeLoanForm.Rate.focus()
}
else
{
loanYears=homeLoanForm.Years.value
if (isNaN(loanYears) || (loanYears < 1 || loanYears >30))
{
alert("Please select a valid number from the list (10,15,20, or 30)!")
homeLoanForm.Years.selectedIndex = 0
homeLoanForm.Years.focus()
}
else
{
var monthlyPmtAmt = monthlyPmt(loanAmt,loanRate,loanYears)
homeLoanForm.Payment.value=dollarFormat(monthlyPmtAmt.toString())
}
}
}
function monthlyPmt(loanAmt,loanRate,loanYears)
{
var interestRate = loanRate/1200
var Pmts = loanYears*12
var Amnt - loanAmt * (interestRate/(1-(1/Math.pow(1+interestRate,Pmts))))
return Amnt.toFixed(2)
}
function dollarFormat(valuein)
{
var formatValue= ""
var formatDollars= ""
formatAmt = valuein.split(".",2)
var dollars = formatAmt[0]
var dollarLen = dollars.length
if (dollarLen > 3)
{
while (dollarLen > 0)
{
tempDollars = dollars.substring(dollarLen - 3,dollarLen)
if(tempDollars.length == 3)
{
formatDollars = ","+tempDollars+formatDollars
dollarLen = dollarLen - 3
}
else
{
formatDollars = tempDollars+formatDollars
dollarLen = 0
}
}
if(formatDollars.substring(0,1) == ",")
{
dollars = formatDollars.substring(1,formatDollars.length)
}
else
dollars = formatDollars
}
var cents = formatAmt[1]
var formatValue="$"+dollars+"."+cents+
return formatValue
}
function popUpNotice()
{
open("chapter10-1notice.html","noticeWin","width-520,height=330")
}
function copyRight()
{
var lastModDate = document.lastModified
var lastModDate = lastModDate.substring(0,10)
displayDateLast.innerHTML="<h6>Copyright© Shoreline State Bank"+"<br />This document was last modified "+lastModDate+".</h6>"
}
//-->
</script>
<style type="text/css">
<!--
.align-center {
text-align:center;
}
table {
margin-left: auto;
margin-right: auto;
width: 70%;
}
.block {
width: 50%;
margin-right: auto;
margin-left: auto;
}
.center-div {
width: 70%;
margin-right: auto;
margin-left: auto;
}
.header-text {
font-family: Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
text-align: center;
}
.center-items {
text-align: center;
}
.right-align {
text-align: right;
width: 50%;
}
.left-align {
text-align: left;
width: 50%;
}
#displayDateLast {
text-align: left;
width: 50%;
margin-right: auto;
margin-left: auto;
}
-->
</style>
</head>
<body onLoad="scrollingMsg(); popUpNotice(); copyRight();">
<div class="center-div">
<p class="center-items"><img src="chapter10-1banner.jpg" alt="banner" /></p>
</div>
<div class="center-div">
<form id="msgForm">
<p style="text-align:center">
<input type="text" name="scrollingMsg" size="25" /></p>
</div>
<p style="text-align:center; font-size:16; font-weight:bold;">Home Mortgage Loan Payment Calculator</p>
<p class="block"><strong>Directions: </strong>Enter the agreed selling price, press the tab key, enter the down payment and press the tab key. The loan amount will be calculated automatically. Then enter the interest rate and the number of years for the loan and click the Calculate button.</p>
<div class="center-div">
<form id="homeLoanForm" method="post">
<table>
<tr>
<td class="right-align">
<span style="color:#cc0000;">*</span>Sales Price:
</td>
<td class="align-left"><input type="text" name="SaleAmount" size="9" />
</td>
</tr>
<tr>
<td class="right-align">
<span style="color:#cc0000;">*</span>Down Payment in Dollars
</td>
<td class="align-left"><input name="DownPayment" type="text" id="DownPayment" size="9" onBlur="validSalesAmt()" /></td>
</tr>
<tr>
<td class="right-align">
<span style="color:#cc0000;">*</span>Loan Amount
</td>
<td class="align-left"><input name="LoanAmount" type="text" id="LoanAmount" size="9" />
</td>
</tr>
<tr>
<td class="right-align">
<span style="color:#cc0000;">*</span>Interest Rate (e.g. 5.9):
</td>
<td class="align-left"><input name="Rate" type="text" id="Rate" size="5" maxlength="5" />
</td>
</tr>
<tr>
<td class="right-align">
<span style="color:#cc0000;">*</span>Number of Years:
</td>
<td><select name="Years" id="Years">
<option value="0">Select Number of Years</option>
<option value=10>10</option>
<option value=15>15</option>
<option value=20>20</option>
<option value=30>30</option>
</select></td>
</tr>
<tr>
<td class="right-align">
<input name="button" type="button" value="Calculate" onClick="CalcLoanAmt()"/>
</td>
<td class="align-left">
<input name="Reset" type="reset" />
</td>
</tr>
<tr>
<td class="right-align">
<span style="font-weight:bolder;">Monthly Payment:</span>
</td>
<td><input type="text" name="Payment" id="Payment" value=" " size="12" /></td>
</tr>
<tr>
<td colspan="2" class="align-center">
<span style="color:#cc0000; font-size:12px;">* Indicates a required field.</span>
</td>
</tr>
</table>
</form>
</div>
<div id="displayDateLast">
</div>
</body>
</html>

when the browser finds a syntax-error in a <script> he will discard the entire script-code within this script.
a simple demonstration:
<body onLoad="foo();bar();foobar();">
<script type="text/javascript">
var a + b;//syntax-error, similar to line 86 in your script
//this will not run because this script has been discarded
//because of the syntax-error above
function bar(){
alert('bar works');
}
</script>
<script type="text/javascript">
//this will run because here is no syntax-error,
//the function is available
function foo(){
alert('foo works');
}
//although this function is available too this will not run
//because of the error forced by the call of bar()
function foobar(){
alert('foobar works');
}
</script>
</body>
That's why the function scrollingMsg will be unknown, although there is no syntax-error within this function, because there are multiple syntax-errors in this script, fix them.