Skip to content

Instantly share code, notes, and snippets.

@scodx
Created August 16, 2012 20:09
Show Gist options
  • Save scodx/3373204 to your computer and use it in GitHub Desktop.
Save scodx/3373204 to your computer and use it in GitHub Desktop.
EVAL() IS EVIL!!!!!!
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["fieldName"].value
Or:
CODE
document["formName"]["fieldName"].value
Or even:
CODE
document.formName[variableName].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["fieldName[]"].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["field"+i].value='New Value';
}
Creating a variable with a dynamic name is also easy:
CODE
window["my"+"Dyn"+"Var"]="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[unescape(v[0])]=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[SortBy] > b[SortBy]){return 1}
if(a[SortBy] < b[SortBy]){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 SortBy = "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[fncName]()
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[myImgVar]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment