Here’s the problem, I’ve been working on two pices of code recently, basic Js which has to do with event handling, and onClick functions – everything working fine, up until today whereby upon clicking the button linking to function nothing happens. Code as follows:
<html>
<title>Calculate Your Monthly Payments</title>
<script language="JavaScript">
function Calc(){
var a, res;
a = parseFloat(document.monthly.borrow.value);
res1 = a/300;
res2 = a/500;
res3 = a/900;
if (document.monthly.borrow.value == ""){
window.alert("Enter the amount that you will be borrowing.");
return;
}
else if (document.monthly.payments.selectedIndex == 0){
window.alert("Please select a mortgage type.");
return;
}
else if(document.monthly.payments.value == "1" )
{
window.alert("Your short term monthly repayments have been estimaded to be £" + res1);
}
else if(document.monthly.payments.value == "2" )
{
window.alert("Your medium term monthly repayments have been estimaded to be £ " + res2);
}
else if(document.monthly.payments.value == "3" )
{
window.alert("Your long term monthly repayments have been estimaded to be £ " + res3);
}
}
</script>
</head>
<div id="container">
<h2>Calculate Your Monthly Payments</h2>
<h4>Please fill in the form below</h4>
<form id="monthly">
How much are you borrowing? (£):<font color="#900">*</font> <br /><input name = "borrow" type = "text" size = "10" id="textarea" /> <br /><br />
Mortgage Type: <br />
<select name = "payments">
<option value="" selected="selected">Please Select </option>
<option value="1">CompleteQuaters Mortgage 2.19% fixed until 2015 </option>
<option value="2">CompleteQuaters Mortgage 3.17% fixed until 2017 </option>
<option value="3">CompleteQuaters Mortgage 3.18% fixed until 2024 </option>
</select>
<br /><br />
<input type = "button" value = "Calculate Payments! " onclick = "Calc();" />
<br />
<p><font color="#900">*Indicates Required Fields</font></p>
</form>
</html>
Naturally, I ran it through Chrome(20.0.1096.1) and surely enough I got an error, one error to be precise:
Uncaught TypeError: Cannot read property ‘borrow’ of undefined
I’m not sure where to go from here since this error must have been there all along and yet it was working.
Problem continues..
I’ve tested this code in all of the main browsers (Firefox, Chrome, IE) and on three different computers (Windows 7, Vista, XP) and as well Chrome Beta for Android and Mobile Safari, however, none of them will respond to the onClick event.
I also should point out that upon onClick a window normally open and displays:
“Your X term Monthly Payment is £XXXXX”.
“X” being the variable result of whatever is chosen.
I’ve been through this everything several times already but as I’m not exactly great at Js I would certainly appreciate any help I could get.
If more information is needed about the problem let me know.
You are using
document.monthly.borrow.valuesoshould be
or you can use both as follows
If you want to select an element by id then you can use document.getElementById(‘elementId’)
DEMO