Wrox Programmer Forums
|
Javascript General Javascript discussions.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old March 4th, 2010, 05:35 PM
Registered User
 
Join Date: Mar 2010
Posts: 8
Thanks: 3
Thanked 0 Times in 0 Posts
Default Square brackets in JS

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 March 4th, 2010, 08:14 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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.
The Following User Says Thank You to Old Pedant For This Useful Post:
olivaw (March 6th, 2010)
 
Old March 5th, 2010, 03:32 AM
Friend of Wrox
 
Join Date: Dec 2008
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

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.

Last edited by PeterPeiGuo; March 5th, 2010 at 03:37 AM..
 
Old March 5th, 2010, 03:55 AM
Friend of Wrox
 
Join Date: Dec 2008
Posts: 238
Thanks: 2
Thanked 20 Times in 19 Posts
Default

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>

Last edited by PeterPeiGuo; March 5th, 2010 at 03:58 AM..
The Following User Says Thank You to PeterPeiGuo For This Useful Post:
olivaw (March 6th, 2010)
 
Old March 5th, 2010, 03:31 PM
Friend of Wrox
 
Join Date: Jun 2008
Posts: 1,649
Thanks: 3
Thanked 141 Times in 140 Posts
Default

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

Last edited by Old Pedant; March 5th, 2010 at 03:37 PM..
 
Old March 5th, 2010, 06:09 PM
Registered User
 
Join Date: Mar 2010
Posts: 8
Thanks: 3
Thanked 0 Times in 0 Posts
Default

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





Similar Threads
Thread Thread Starter Forum Replies Last Post
drawing a square wave nyc9 Visual C++ 1 December 31st, 2006 09:16 AM
Square Brackets in Form Names dylan_b JSP Basics 1 July 11th, 2006 02:29 PM
Square root Ashleek007 C++ Programming 3 December 12th, 2004 04:21 PM
What do the brackets actually do... Brettvan1 VB.NET 2002/2003 Basics 2 October 5th, 2004 09:24 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.