Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using brackets as an alternative to dot notation and eval()

Object Referencing

Using brackets as an alternative to dot notation and eval()

by  adam0101  Posted    (Edited  )
Most times you can get a reference to an object using document.getElementById("myID"). However, there are certain situations where an alternate method is required. For example, if there is no ID because the object you are trying to retrieve isn't an HTML element and perhaps the name of the object isn't known until run-time.

If the object name is known at design-time, you can easily refer to the object using dot notation. Dot notation is a way to traverse the Document Object Model (DOM) to find the object you're looking for. For example:
Code: 
document.formName.fieldName.value
What you may not be aware of is that you can also refer to objects like you would with an associative array:
Code: 
document.formName[b][red]["fieldName"][/red][/b].value
Or:
Code: 
document[b][red]["formName"]["fieldName"][/red][/b].value
Or even:
Code: 
document.formName[b][red][variableName][/red][/b].value
This is useful if your field name has spaces or dots in it. It's also good if you work with PHP which requires you to name your multiple select fields like "fieldName[]":
Code: 
document.formName[b][red]["fieldName[]"][/red][/b].value
It also gives you a way to refer to variable names that may be dynamically generated so you don't have to use eval() which is a huge resource hog. For example, if you had 10 fields named field0, field1, field2, etc... you could use a loop in the following manner:
Code: 
for(var i=0;i<10;i++){
  document.formName[b][red]["field"+i][/red][/b].value='New Value';
}
Creating a variable with a dynamic name is also easy:
Code: 
window[b][red]["my"+"Dyn"+"Var"][/red][/b]="This string is in the variable 'myDynVar'.";
Here's an example of this in use. This script turns all querystring parameters into window variables:
Code: 
var p=location.search.substring(1).replace(/\+/g,' ').split("&");
for(var i=0;i<p.length;i++){
  v=p[i].split("=");
  window[b][red][unescape(v[0])][/red][/b]=unescape(v[1])
}
Here's another example that uses this technique to refer to properties of a custom object. This script will sort an array of custom objects based on one of the properties of those objects:
Code: 
<script>
function CD(band,album,year,genre) {
    this.band  = band
    this.album = album
    this.year  = year
    this.genre = genre
}
function mySort(a,b){
  if(a[b][red][SortBy][/red][/b] > b[b][red][SortBy][/red][/b]){return 1}
  if(a[b][red][SortBy][/red][/b] < b[b][red][SortBy][/red][/b]){return -1}
  return 0
}

var myCDs = new Array();
myCDs[0] = new CD("Metallica","And justice for all","1988","Metal")
myCDs[1] = new CD("Sepultura","Arise","1991","Trash")
myCDs[2] = new CD("Black Sabbath","Master of Reality","1976","Hard Rock")

var [red]SortBy[/red] = "band" //change this to the column you want to sort on.
myCDs.sort(mySort)
</script>
Finally, you can use this technique to dynamically refer to a function:
Code: 
var fncName="myFunctionName";
window[b][red][fncName][/red][/b]()

Basically, any object that represents a collection of properties or objects can use this method if dot notation is not an option. For example, images can be referred to using this:
Code: 
var img = document.images[b][red][myImgVar][/red][/b]

I hope this helps!

Adam
http://adameslinger.blogspot.com//
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top