Square brackets in JS

olivaw · March 4th, 2010, 05:35 PM

In the code below I don't understand why square brackets need to be used (italicised):

function updateOrderDetails()
{
var total = 0;
var orderDetails = "";
var formElement;

formElement =
document.form1.cboProcessor[document.form1.cboProcessor.selectedIndex];
total = parseFloat (CompItems[formElement.value]);
orderDetails = "Processor : " + formElement.text;
orderDetails = orderDetails + " $" + CompItems[formElement.value] + "\n";

I don't understand why you can't just do formElement=document.form1.cboProcessor.selectedIn dex

Obviously if you do this it will display 'undefined'. But why is this the case?

Thanks!

Old Pedant · March 4th, 2010, 08:14 PM

Break it down:

document.form1.cboProcessor refers to a <select>.
It refers to the *entire* <select> object, with all its properties.

document.form1.cboProcessor.selectedIndex is just ONE property of that <select>.
Specifically, it is the index number (0 to n) of the <option> currently chosen by the user.

document.form1.cboProcessor[ ] refers to the collections of <option>s for that <select>.
It's a synonym for document.form1.cboProcessor.options[ ]

So, finally, document.form1.cboProcessor[document.form1.cboProcessor.selectedIndex] refers to *ONE* <option> of that <select>.
Specifically, it refers to the one <option> currently chosen by the user.

So in this case, the variable formElement is now a reference to a single <option>.

And then formElement.value is whatever the value property of that option (e.g., <option value="7.35">) is.
Finally, formElement.text is the text that appears between the <option> and </option> tags for that particular <option>.

NOTE: You *could* get the value of the selected <option> by simply coding
document.form1.cboProcessor.value
But that wouldn't help you get the .text of that same <option> and so would be no great help in this particular code.

***************

Personally, I'd rewrite that code, to make it more obvious what is happening.

Thus:

Code:

function updateOrderDetails()
{
    var sel = document.form1.cboProcessor;
    var opt = sel[sel.selectedIndex];
    var val = parseFloat(opt.value);
    var txt = opt.text;
    orderDetails = "Processor : " + txt + " $" + val.toFixed(2) + "\n";
    ...

I don't see total being used for anything there, so I omitted it.

PeterPeiGuo · March 5th, 2010, 03:32 AM

Basically document.form1.cboProcessor.selectedIndex has neither .text property nor .value property. You will get undefined if you try to access them and that's what happened.

PeterPeiGuo · March 5th, 2010, 03:55 AM

Just for fun and learning, the following script shows you that:
1) selectedIndex is a Number;
2) Bonus learning point: how to use prototype to create .value property for Number class.

Code:

<html>
	<head>
		<script type="text/javascript">
			Number.prototype.value = 200;
			function pick() {
				alert(document.form1.fruits.selectedIndex.value);
			}
		</script>
	</head>
<body>
<form name="form1">
	<SELECT NAME="fruits" foo="bar" onChange="pick()">
		<OPTION VALUE="1">Apple
		<OPTION VALUE="2">Orange
		<OPTION VALUE="3">Pear
	</SELECT>
</form>
</body>
</html>

Old Pedant · March 5th, 2010, 03:31 PM

Fun, yes, but I think it will only utterly confuse a newbie.

olivaw · March 5th, 2010, 06:09 PM

Thanks very much, both of you, for your help.