Basic JS failing in Firefox 'is not defined' error. Anyone tell me why?

JavaScript
1

Hi all, whilst I’m competent with XHTML/CSS I’m a JS beginner. This is a basic piece of javascript which is working fine in IE and Safari but not in Firefox 3. Can anyone tell me why?

The error I get is ‘concrete is not defined’. The error occurs when pressing the ‘volume’ button on the form…

Here is the full HTML of the test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>concrete and ballast calculator</title>

<script type="text/javascript">
function volume()
{
concrete.cums.value=(Math.round(concrete.width.value*concrete.depth.value*concrete.height.value*100))/100;
}

function calcQs()
{
cubems=concrete.cums.value;

concrete.cement.value=Math.round(cubems*320)+" kgs";
concrete.sand.value=Math.round(cubems*600)+" kgs";
concrete.gravel.value=Math.round(cubems*1200)+" kgs";
concrete.water.value=Math.round(cubems*176)+" ltrs";
}
</script>

</head>
<body>
<form name="concrete" id="concrete" action="post" onsubmit="return false">
           Concrete Calculator 1.2.4 ratio
        Width<input name="width" type="text" id="width" size="20" />
        Length<input name="height" type="text" size="20" />
        Depth<input name="depth" type="text" id="depth" size="20" />
        <input type="button" value="Volume" name="volumeCalc" onclick="return volume()" />
          Cubic Meters<input type="text" name="cums" size="20" />
              <input type="button" value="Quantities" onclick="return calcQs()" name="quantities" />
          Cement<input type="text" name="cement" size="20" />
          Sharp Sand<input type="text" name="sand" size="20" />
          Gravel<input type="text" name="gravel" size="20" />
          Water (liters)<input type="text" name="water" size="20" />                  
</form>
</body>
</html>
2

Hi cssbleach, thanks for taking the time to respond and also explain. It makes more sense to me now, and most importantly - works perfect with no errors!

Thanks :smiley:

3

Hi benfrain

You are not getting the html element correctly.

So instead just concrete.cums.value, for example, add document to it i.e document.concrete.cums.value

Don’t forget to always start with document since all HTML tags belong to to the document object in the DOM (Document Object Model) hierarchy.

And also, make a variable of the statment you going to use more than one time, it make easy, like this:

var concreteForm = document.concrete;

4

You are welcome, benfrain.

5

nice explanation cssbleach :tup: