Calculator Tutorial

6. Link the Button

To link the function that we have created to our form we need to attach the external Javascript to the page containing our form. To do this we place the following code into the head section of the web page containing the form (substitute whatever you called your script where I have easter.js):

We can now amend the code for the button in the form so that it calls the function.

You should now have a working form that will return the correct result provided that valid data in entered into the input fields before the button is pressed. You should test your calculator further at this stage to check that the button does what it is supposed to do (but make sure that you only enter valid input). I actually pasted the necessary code into this page to test my Easter Calculator at this stage but have removed it again as we still have some way to go before it is usable by anyone other than me.

You know what values are valid to put into your calculator but others will delight in trying to enter all sorts of rubbish into the calculator if you let them. The next step is to validate the input.