First off, the script element has no language attribute, and if it did, 'javascript' would not be a valid attribute value for it. The language attribute is used to indicate what natural language is used, such as 'en', 'fr' etc, and can for example be used for the html element.
The script element does however take a type attribute, which should take the value 'application/javascript', but cannot be used since no IE understands this, up til and including the present version, IE8. Therefor, specifying type="text/javascript" is preferable.
I'd also strongly recommend using a consistent style for your html code. uppercase (INPUT), lowercase (script) OR camelCase (onChange), not all three.
Manipulating values through javascript in an html document is done through the DOM. The best online reference I've found is Firefox's: https://developer.mozilla.org/en/Gecko_DOM_Reference
There are of course implementation differences (mainly IE not following spec) which you'll get the joy of discovering. As such, always test your scripts in all browsers you want to support.
There are always more than one way of finding the appropriate element or elements and from there on, their values.
Through the relative places in the dom hierarchy
<script type="text/javascript">
function enterData(o)
{
// nextsibling for quantity is a textnode containing a newline
// nextsibling for this text node is the food input element
var foodElement = o.nextSibling.nextSibling;
alert(foodElement.value);
}
</script>
<input type="text" onchange="enterdata(this)" name="quantity" size="1" maxlength="2" />
<input type="text" name="food" value="donut" />
Same as above, but now the HTML code has change which means the DOM tree looks different and you'd need to modify your code accordingly.
<script type="text/javascript">
function enterData(o)
{
// now the next sibling is the food element
var foodElement = o.nextSibling;
alert(foodElement.value);
}
</script>
<input type="text" onchange="enterdata(this)" name="quantity" size="1" maxlength="2" /><input type="text" name="food" value="donut" />
Still uses the structure of the DOM tree, but by grabbing all input element of the containing element.
<script type="text/javascript">
function enterData(o)
{
// retrieve all input elements that are children of the div
var els = o.getElementsByTagName('input');
for (var i = 0; i < els.length; ++i)
{
if (els[i].name == 'food')
{
alert(els[i].value);
}
}
}
</script>
<div>
<input type="text" onchange="enterdata(this.parentNode)" name="quantity" size="1" maxlength="2" />
<input type="text" name="food" value="donut" />
</div>
Directly, by retrieving an element based on its id attribute
<script type="text/javascript">
function enterData()
{
var foodElement = document.getElementById('food');
alert(foodElement.value);
}
</script>
<div>
<input type="text" onchange="enterdata()" name="quantity" size="1" maxlength="2" />
<input type="text" name="food" id="food" value="donut" />
</div>
