UK Webmaster Talk - Online Marketing - SEO


 

Manipulating Attributes Using Javascript

This is a discussion on Manipulating Attributes Using Javascript within the Website Design Articles forums, part of the Webmaster Articles/Tutorials category; Hi, this is just a little tutorial to show you a few ways that you can use javascript to change ...


Go Back   UK Webmaster Talk - Online Marketing - SEO > Webmaster Articles > Webmaster Articles/Tutorials > Website Design Articles

Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Notices

Reply

 

LinkBack Thread Tools Display Modes
Old 07-05-2005, 11:06   #1 (permalink)
WMT Addict
 
Join Date: Apr 2005
Posts: 120
iTrader: 0 / 0%
Shwaza will become famous soon enough
Default 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
Shwaza is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Old 09-06-2005, 07:44   #2 (permalink)
Senior Member
 
Join Date: Jun 2005
Posts: 389
iTrader: 0 / 0%
FrozenDice will become famous soon enough
Default

Whats really cool is when you change css attributes, just make a function where you send the class and new value.
FrozenDice is offline  
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply

Tags
attributes, javascript, manipulating

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

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


All times are GMT +1. The time now is 01:18.


Powered by vBulletin® Version 3.7.3
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0
UK Webmaster Forum © WebmasterTalk.co.uk | Design by Forbairt

Ad Management by RedTyger

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41