Calculating multiple variables onclick

[lzr]

Hi,
I have a js that introduces some function a() that includes math formulas for a number of variables, say v1, v2,v3, etc. When a user enters data in my form and clicks a button, the calculated values of all the variables have to be displayed in appropriate fields of the form. I am using this script:

<td><input value="Calculate" onclick="a(document.form.v1.value);" type="button"></td>

Note that although it includes only variable v1, I saw that all other variables (v2, v3, etc) are also calculated onclick and displayed in the form. This is good, however, I am not sure if this is the right practice and this script would work in all browsers. I wonder if anyone could suggest the best practice for a form buttom that would calculate and display multiple variables onclick.
Thanks.

[felgall]

Best practice would be to move the JavaScript out of the HTML input tag and into a separate JavaScript file. Simply give the button an id and then you can attach as much onclick JavaScript as you need in the JavaScript file rather than in the HTML.

<input value="Calculate" id="calc" type="button">

document.getElementBiId('calc').onclick = function() {
   a(document.form.v1.value); // or whatever JavaScript you want
   b(document.form.v2.value);
};

or better still use an event listener instead of the event handler so that other independent actions can be attached to the same event.

[lzr]

Originally Posted by felgall

Best practice would be to move the JavaScript out of the HTML input tag and into a separate JavaScript file. Simply give the button an id and then you can attach as much onclick JavaScript as you need in the JavaScript file rather than in the HTML.

<input value="Calculate" id="calc" type="button">

document.getElementBiId('calc').onclick = function() {
   a(document.form.v1.value); // or whatever JavaScript you want
   b(document.form.v2.value);
};

Stephen,
Thank you for the script. Should this code be placed inside or outside the brackets that describe my js function a()? Actually, I tried both ways but it does not seem to work. I put the script for my function a() along with your code in an external .js file and changed html for the button exactly as wrote, but I am not proficient with js so maybe I am missing a simple thing. And I presume of course if all v1, v2, etc are described within the same function a(), I can put there
a(document.form.v1.value);
a(document.form.v2.value); ?