Using an Object Id with JavaScript

Shawn Olson

Posted Aug 24, 2004
Last Updated Nov 7, 2011

For a web designer, one of the most powerful features of JavaScript is its ability to manipulate the visual qualities of objects on a web page in real time. With JavaScript you can tell a browser to display content in red one minute and then green the next.

The problem with a page that has many objects that you want to control with similar functions is keeping track of which element you need to refer to. If a page has a dozen photos, and you want to work with each individually, how do you keep track of them?

The solution is the ID attribute of an HTML element (click here for a robust video tutorial and reference files on manipulating styles with JavaScript.). Any element inside the body of an HTML document may have a unique ID which you place in its opening tag. For example, the two images below have the following HTML:

<img
src="http://www.shawnolson.net/smo/media/smotograph.gif"
id="exampleA"
alt="Example A"/>
<img
src="http://www.shawnolson.net/smo/media/cglogo.png"
id="exampleB"
alt="Example B"/>
Example A Example B
Example A Example B
Width Height

Notice the id="exampleA" and id="exampleB". We can use those ids when calling functions to make sure that the effect of a function is applied to the desired element only. So say we write a function to change the sizes of those image called changeImgSize(objectId,newWidth,newHeight). We could now control the new size of the image by referencing its ID and passing a new size in the function. To change exampleA to 50 x 100 we would use the following line:

changeImgSize(‘exampleA’,50,100)

The way that changeImgSize() references the specific object is by a built-in method of the document object in JavaScript called getElementById(). To affect any specifically labeled object in your web page, simply refer to it with "document.getElementById("myObject")” (replacing "myObject” with the desired object).

changeImgSize() is available at http://www.shawnolson.net/scripts/public_smo_scripts.js. Please include credit when using this script and read this site's Terms & Conditions before using.

Comment

No HTML Tags are permitted.

William Moraes

Dec 21, 2008

hey man, fix up your button!

on the button event you should put this:



changeImgSize(document.exampleForm.Example.value,document.exampleForm.width.value,document.exampleForm.height.value); return false



you forgot the "return false". without this the page will send all data from the form to the action, and reload the page as well.



:) (sorry for my bad english)

Reply

Shawn Olson

Dec 23, 2008





William, thanks for the post. The function was something I put up years ago to demonstrate how to use an object's ID to manipulate it. The article really did not get to the point... but it did provide that function.





I expect to write something more useful in time. As for your comment about the button... the function being called was not intended to return anything. I assume you were having a problem with the function because you were using Firefox or another browser beyond IE. In IE, a button does not automatically submit a form... since the demonstration form was not originally intended to submit the form to a server script... and I originally did not test it in Firefox... I did not see the issue you brought to my attention.





I have updated the demo form to work properly in Firefox. Thanks for pointing out the issue.

Reply

Wall Worm plugins and scripts for 3ds Max