JavaScript function failing to handle events

Question

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.

The Alpha · Accepted Answer · 2012-04-24 22:15:43Z

2

You are using document.monthly.borrow.value so

<form id="monthly">

should be

<form name="monthly">

or you can use both as follows

<form name="monthly" id="monthly">

If you want to select an element by id then you can use document.getElementById('elementId')

DEMO

edited Apr 24, 2012 at 22:15

answered Apr 24, 2012 at 22:10

The Alpha

147k30 gold badges294 silver badges313 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikolas Over a year ago

Jeez, cant beleive I let something so small slip me, it works. Can't thank you enough.

elclanrs · Accepted Answer · 2012-04-24 22:11:33Z

0

You have some syntax errors:

res1, res2, res3 are not defined. This is dangerous because it uses the global scope and you probably don't want that.
You can't return; in an if statement like that. That's going to be a source of errors for sure. For that we use switch statements and break.
If you're comparing stuff to numbers or numbers as strings it would be better to use === instead of == to avoid type coercion. That's a source of problems too.

answered Apr 24, 2012 at 22:11

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

5 Comments

Nikolas Over a year ago

Hi I'm not sure what you mean, I have the res as function of the variable a which is the figure that will be entered. But if you can explain more I would appreciate it, thanks.

Jonathan Lonowski Over a year ago

@Nikolas res1, et al. are distinct from res and, unlike res, aren't being declared with var. Without the keyword, they become globals rather than scoped variables. If you instead intended them to be part of res, you can define them as keys of an object: var res = {}; res[1] = a/300;

Nikolas Over a year ago

@JonathanLonowski I literally just spent the last 3 minutes taking all of this in, I'm going to go and edit the code a bit more and use the way you mentioned. Thanks for the info, that was much appreciated.

Nikolas Over a year ago

@JonathanLonowski just wanted to let you know that I tried it out but for some reason it didn't work as I planned i'm not sure if I did it correctly but I replaced my res and wrote it as this - var res = {}; res[1] = a/300; res[2] = a/500; res[3] = a/900; then upon onClick nothing happens.

elclanrs Over a year ago

var res={} means to store that in an object not literally that. You could use an array also, var res = [300, 500, 900] // res[1] = 500

Rodrigo Manguinho · Accepted Answer · 2012-04-24 22:12:32Z

0

Stop using attribute name. Use ID instead. To get elements use document.getElementById("id") Ex (according to your HTML, switch:

a = parseFloat(document.monthly.borrow.value);

by

a = parseFloat(document.getElementById("textarea").value);

Then you have to change the rest of your code.

answered Apr 24, 2012 at 22:12

Rodrigo Manguinho

1,4113 gold badges21 silver badges28 bronze badges

1 Comment

Nikolas Over a year ago

I've been meaning to get familair with that, but I will definitely get into the habit when working on future projects. thanks mate!

Collectives™ on Stack Overflow

JavaScript function failing to handle events

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related