Having issues with BMI calculator

[ahaberman25]

I have added code to a quiz that I am building to include a BMI calculator and it will not display the result. I have built it on a separate page and it works fine, when I add it to the quiz it fails.

code found here

berlin test.html is the quiz version
and berlinbmi.html is the stand alone version.

I have got to be missing something and just cannot figure it out. please help.

[Logic Ali]

Originally Posted by ahaberman25

I have got to be missing something

Yes - use of the error console.

If a function addresses a form, pass it a reference to the form, don't address the form via a changeable index.

[ahaberman25]

I am sorry but I dont understand

error is saying undefined value f.wt.value

[Logic Ali]

Originally Posted by ahaberman25

I am sorry but I dont understand

function compute(){
   var f = self.document.forms[1];

How do you know that the relevant form will always be the second form in the document?

(Changing the index isn't the answer)

function compute( theForm )
{
   var w = theForm.wt.value,
       v = theForm.htf.value,
       u = theForm.hti.value;

.........


onclick="self.compute( this.form );"

[ahaberman25]

Originally Posted by Logic Ali

How do you know that the relevant form will always be the second form in the document?

(Changing the index isn't the answer)

function compute( theForm )
{
   var w = theForm.wt.value,
       v = theForm.htf.value,
       u = theForm.hti.value;

.........


onclick="self.compute( this.form );"

OMFG that totally makes sense, I didnt see the stupid [1].....i changed to 4 and BAM...i just didnt see it, i knew it was something so retarded gawd. Been doing this for 2 years and still run into issues. THANK YOU VERY MUCH!

[Old Pedant]

You are using

var f = self.document.forms[1];

on both pages.

But on the main page, the BMI form is *actually* forms[4].

It's a really crappy idea to use NUMBERED forms.

And NAMED forms are considered VERY obsolete.

You should give IDs to all your <form> tags!

So:

<form id="bmi_input">

and then

var f = document.getElementById("bmi_input");

[Old Pedant]

And LogicAli's answer of using onclick="self.compute( this.form );" is even better. By far the best solution.

But in any case, it is way way past time to stop using named forms and move to using id's.

[ahaberman25]

Originally Posted by Old Pedant

You are using

var f = self.document.forms[1];

on both pages.

But on the main page, the BMI form is *actually* forms[4].

It's a really crappy idea to use NUMBERED forms.

And NAMED forms are considered VERY obsolete.

You should give IDs to all your <form> tags!

So:

<form id="bmi_input">

and then

var f = document.getElementById("bmi_input");

for this project I am just changing to [4] which i figured out from ali's last post, I will be using id's but i had permission to use this code so I was skipping a step and using a prev employees code (which is always hell)

Thank you for your answer.

[Old Pedant]

I still like LogicAli's answer better.

It has no impact on the form name (or lack thereof). It affects only the calling of the BMI function. It doesn't depend on what form "number" you are using. etc., etc., etc.

You can leave all the code in the function the same if you just use

function compute( f )
{
     // remove the line: var f = ...
     ... rest of code untouched ...
}

... onclick="self.compute( this.form );" ...

[ahaberman25]

Originally Posted by Old Pedant

I still like LogicAli's answer better.

It has no impact on the form name (or lack thereof). It affects only the calling of the BMI function. It doesn't depend on what form "number" you are using. etc., etc., etc.

You can leave all the code in the function the same if you just use

function compute( f )
{
     // remove the line: var f = ...
     ... rest of code untouched ...
}

... onclick="self.compute( this.form );" ...

doesnt work, the var f is called through out almost every other variable, i would have to re structure some of it.

[Old Pedant]

Originally Posted by ahaberman25

doesnt work, the var f is called through out almost every other variable, i would have to re structure some of it.

WHAT?? NOT TRUE!

Here:
http://mywhizbang.com/bmi.html

Go ahead. Do a VIEW-->>SOURCE to see what I did.

But all I changed was

<input type="button" value="Compute BMI" onclick="compute(this.form);" />

and

function compute(f){
   // and I removed your var f = self.document.forms[4];

Note that this change *HAD* to work, because of the var in that line I removed!

*BY DEFINITION* the variable f is ONLY LOCAL to that one function!

Any time you declare a var *inside* a function, it can only be seen within that function.

So your statement that

var f is called through out ...

is simply not true. The *ONLY* place *THAT PARTICULAR* var f can be used is *inside* that compute( ) function.

[Old Pedant]

I understand that mucking in other people's code can be a pain, but if you are going to have to muck, you might as well do some "mucking out". Toss out code that is clearly problematic.

Just for example, suppose somebody *else* comes along after you and adds *another* <form> into that page. So that now the BMI form is actually forms[5] !! That person will have to struggle with finding that wrongly numbered <form> all over again! Whereas if you use LogicAli's answer (or even my answer!) the code is now fixed so that this confusion won't have to occur again.

I hope you won't take this wrong, but if you were on my team and just changed the [1] to [4] you would be stomped all over in a code review!! (And not just by me! Every team member would call you out.)

[ahaberman25]

Strange when I do it, says "cannot find variable f"

[ahaberman25]

nevermind im retarded you added compute(f)

[Old Pedant]

LOL! Yep, no wonder you were confused!