Manipulating Attributes Using Javascript

Shwaza · 07-05-2005, 11:06

Hi, this is just a little tutorial to show you a few ways that you can use javascript to change attributes of different things, such as font colors, form values, image sources, etc.

First of all, we'll start off with something that is quite easy, but is handy for something such as a username and password form.

HTML Code:

<input type="text" name="text" value="Username" onclick="value=''">

That's the easiest way to alter the value of something, is using a handler (in this case "onclick") to change an attribute of that object. As you can probably tell, this will text box will display "Username" until the user clicks it to enter their username, then the value becomes blank so they don't have to backspace "Username".

Next, i'll show you how to control the attributes of other objects. This is achieved by using:

HTML Code:

onclick="document.nameofobject.attribute='new value'"

So again, we're using the handler onclick, except this time, we can change "nameofobject" to the name of the object we want to change an attribute on, and change "attribute" to the attribute you want to change, such as "color", "value", "src" etc.

Here's an actual use of this:

HTML Code:

<input type="text" name="text">
<input type="button" value="Click Me" onclick="document.text.value='You clicked me!'">

And that will give you a button and a text box, and if the button is clicked on, the text box will then display "You clicked me!". Of course though, this could be used on whatever else you wanted it to (images, fonts, etc).

Finally, i'll just show you a little addon to the previous one. This would be mainly used for inputs of various sorts. It's relatively similar to how when you click the smilies on the side of a post, when you're writing it. This will allow you to add onto the previous value of an attribute (most likely the value).

HTML Code:

onclick="document.nameofobject.attribute+='Extra bit to add on'"

And so if you were to add that attribute to something you would be clicking on, and changed "nameofobject" and "attribute" to fit your needs, You would add "Extra bit to add on" to the end of your attribute of that object.

Here's an example of how you could actually use it:

HTML Code:

<textarea name="textarea">Text</textarea>
<img src="images/smile.gif" onclick="document.textarea.value+=':)'">

And, of course, that would add "

" to the end of your textareas current value.

I hope that this tutorial can be helpful to some of you out there

FrozenDice · 09-06-2005, 07:44

Whats really cool is when you change css attributes, just make a function where you send the class and new value.

07-05-2005, 11:06	#1 (permalink)
Shwaza WMT Addict Join Date: Apr 2005 Posts: 120 iTrader: 0 / 0%	Manipulating Attributes Using Javascript Hi, this is just a little tutorial to show you a few ways that you can use javascript to change attributes of different things, such as font colors, form values, image sources, etc. First of all, we'll start off with something that is quite easy, but is handy for something such as a username and password form. HTML Code: <input type="text" name="text" value="Username" onclick="value=''"> That's the easiest way to alter the value of something, is using a handler (in this case "onclick") to change an attribute of that object. As you can probably tell, this will text box will display "Username" until the user clicks it to enter their username, then the value becomes blank so they don't have to backspace "Username". Next, i'll show you how to control the attributes of other objects. This is achieved by using: HTML Code: onclick="document.nameofobject.attribute='new value'" So again, we're using the handler onclick, except this time, we can change "nameofobject" to the name of the object we want to change an attribute on, and change "attribute" to the attribute you want to change, such as "color", "value", "src" etc. Here's an actual use of this: HTML Code: <input type="text" name="text"> <input type="button" value="Click Me" onclick="document.text.value='You clicked me!'"> And that will give you a button and a text box, and if the button is clicked on, the text box will then display "You clicked me!". Of course though, this could be used on whatever else you wanted it to (images, fonts, etc). Finally, i'll just show you a little addon to the previous one. This would be mainly used for inputs of various sorts. It's relatively similar to how when you click the smilies on the side of a post, when you're writing it. This will allow you to add onto the previous value of an attribute (most likely the value). HTML Code: onclick="document.nameofobject.attribute+='Extra bit to add on'" And so if you were to add that attribute to something you would be clicking on, and changed "nameofobject" and "attribute" to fit your needs, You would add "Extra bit to add on" to the end of your attribute of that object. Here's an example of how you could actually use it: HTML Code: <textarea name="textarea">Text</textarea> <img src="images/smile.gif" onclick="document.textarea.value+=':)'"> And, of course, that would add "" to the end of your textareas current value. I hope that this tutorial can be helpful to some of you out there __________________ Kingdoms Of Battle << Check out my free to play online strategy game! SomeCoders - Coding blog, coding tips

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
New JavaScript effects Library!	FrozenDice	Website Design Forum	2	28-10-2005 02:25
Basic Javascript	Morphmaster	Programming Articles	0	26-06-2005 18:46

09-06-2005, 07:44	#2 (permalink)
FrozenDice Senior Member Join Date: Jun 2005 Posts: 389 iTrader: 0 / 0%	Whats really cool is when you change css attributes, just make a function where you send the class and new value.

Manipulating Attributes Using Javascript

Manipulating Attributes Using Javascript

Similar Threads