 |  |  |  |  |  |  |  |
onClick Events to Change to dynamic text
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
I am working on a website right now and have come to a halt. I need my clients to be able to click on a piece of text like
[html]<a onClick="funciton to change text">Webby Stuffy</a>[/html]
and i need it to change the text within a table to something else.
I have found scripts that do this fine but they change the text as static text. like if i wrote:
<a href="http://www.google.com>Visit Google</a>
it would input the text into the field as just that.
it would not update the new field with the new html and so any formatting comes out as plain text.
any help in solving this issue would be great as it would lessen page load time on the user and save me tons of time designing my webpages
[html]<a onClick="funciton to change text">Webby Stuffy</a>[/html]
and i need it to change the text within a table to something else.
I have found scripts that do this fine but they change the text as static text. like if i wrote:
<a href="http://www.google.com>Visit Google</a>
it would input the text into the field as just that.
it would not update the new field with the new html and so any formatting comes out as plain text.
any help in solving this issue would be great as it would lessen page load time on the user and save me tons of time designing my webpages
Dont forget to spread the reputation to those that deserve!
•
•
Join Date: Feb 2002
Posts: 12,040
Reputation: 
Solved Threads: 128
Are you using the writeln() function? Can you show us all your code?
To change the innerHTML of an element, you need to use the (wait for it) "innerHTML" property of that element.
[html]<html>
<body>
<a href="#" onclick="this.innerHTML='<strong>You changed me</strong>';"><em>Change from emphasized to strong.</em></a>
</body>
</html>[/html]
This also avoids using the out-of-date document.write() or document.writeLn() methods.
[html]<html>
<body>
<a href="#" onclick="this.innerHTML='<strong>You changed me</strong>';"><em>Change from emphasized to strong.</em></a>
</body>
</html>[/html]
This also avoids using the out-of-date document.write() or document.writeLn() methods.
•
•
•
•
Originally Posted by tgreer
To change the innerHTML of an element, you need to use the (wait for it) "innerHTML" property of that element.
[html]<html>
<body>
<a href="#" onclick="this.innerHTML='<strong>You changed me</strong>';"><em>Change from emphasized to strong.</em></a>
</body>
</html>[/html]
This also avoids using the out-of-date document.write() or document.writeLn() methods.
a few sites suggested using innertext and i had figured that was what was causing it.
man i hate javascript. I really want to get better at it but i dont really know where to start with it.
anyone know of any good javascript editors with intellisense?
thanks though i am going to test this out right now!
Dont forget to spread the reputation to those that deserve!
•
•
Join Date: Feb 2005
Posts: 51
Reputation:
Solved Threads: 1
Junior Poster in Training
I have a similar problem to this...here is where I am so far ('tis basic as I'm just testing, but I'm crap at JavaScript anyway!):
http://www.btinternet.com/~himh/rms/test2.html
Eventually I'll have about five different images, and want a different date displaying in the table cell for each image. Do I need to write a separate function for each or is there a better way (ie less code) of doing it?
Thanks.
http://www.btinternet.com/~himh/rms/test2.html
Eventually I'll have about five different images, and want a different date displaying in the table cell for each image. Do I need to write a separate function for each or is there a better way (ie less code) of doing it?
Thanks.
Last edited by TheAlex; Nov 19th, 2006 at 12:33 pm.
www.last.fm/music/The+Cakes
One day to go!
www.holeinmyhead.co.uk
Gig & travel photos, writing, artwork & other stuff...
One day to go!
www.holeinmyhead.co.uk
Gig & travel photos, writing, artwork & other stuff...
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation:
Solved Threads: 36
•
•
•
•
Originally Posted by Killer_Typo 
thank you very much, i am going to try this.
a few sites suggested using innertext and i had figured that was what was causing it.
man i hate javascript. I really want to get better at it but i dont really know where to start with it.
anyone know of any good javascript editors with intellisense?
thanks though i am going to test this out right now!
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation:
Solved Threads: 36
•
•
•
•
Originally Posted by TheAlex
I have a similar problem to this...here is where I am so far ('tis basic as I'm just testing, but I'm crap at JavaScript anyway!):
http://www.btinternet.com/~himh/rms/test2.html
Eventually I'll have about five different images, and want a different date displaying in the table cell for each image. Do I need to write a separate function for each or is there a better way (ie less code) of doing it?
Thanks.
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>change date</title>
<script type="text/javascript">
<!--
function showdate(logo, date)
{
logo.src="http://www.publicservice.co.uk/events/image_over.gif";
document.getElementById("date").style.display="inline";
document.getElementById("date").innerHTML=date;
logo.onmouseout=function()
{
logo.src="http://www.publicservice.co.uk/events/image.gif";
document.getElementById("date").style.display="none";
document.getElementById("date").innerHTML="none";
}
}
-->
</script>
</head>
<body>
<table border="1" name="banner">
<tr>
<td>
<a href="http://www.publicservice.co.uk/events/">
<img src="http://www.publicservice.co.uk/events/image_red.gif" onMouseOver="showdate(this, '23rd Nov, 2006')" /></a>
<a href="http://www.publicservice.co.uk/events/">
<img src="http://www.publicservice.co.uk/events/image.gif" onMouseOver="showdate(this, '26th Nov, 2006')" /></a>
</td>
</tr>
<tr>http://www.publicservice.co.uk/events/
<td> <div id="date"></div>
</td>
</tr>
</table>
</body>
</html>
[/html]
I just added a new argument for the showdate function called date. Whenever you call this function you will also specify the date which would be shown in table cell using innerHTML.
Last edited by vishesh; Nov 21st, 2006 at 3:27 am.
•
•
•
•
Originally Posted by vishesh
You will not get any editor which will do whatever you want to do with JavaScript. However you may get pre made snippets and certain tool which may generate certain specific things such as Menus, SlideShows etc.... If you just want a JavaScript Editor there are several and generally every HTML Editor supports JavaScript.
like when programming using visual studio, visual studio will finish the words and names of things when they are recognized.
Dont forget to spread the reputation to those that deserve!
•
•
Join Date: Oct 2006
Posts: 1,311
Reputation:
Solved Threads: 36
•
•
•
•
Originally Posted by Killer_Typo
like when programming using visual studio, visual studio will finish the words and names of things when they are recognized.
Well as i mentioned before there are several available and most html editor supports javascript. Some of them which have intellisance are Dreamweaver, WeBuilder, HTMLPad etc...
However if you want an editor particularly for JavaScript'ing you have 1st JavaScript Editor, Antechinus JavaScript Editor, ScrypTik - javascript editor etc etc.
However i suggest to stick with whatever you are using now for your html files until you really have very very very big work.
Last edited by vishesh; Nov 21st, 2006 at 6:09 am.
•
•
Join Date: Feb 2005
Posts: 51
Reputation:
Solved Threads: 1
Junior Poster in Training
•
•
•
•
Originally Posted by vishesh
Is this what you want:
I just added a new argument for the showdate function called date. Whenever you call this function you will also specify the date which would be shown in table cell using innerHTML.
www.last.fm/music/The+Cakes
One day to go!
www.holeinmyhead.co.uk
Gig & travel photos, writing, artwork & other stuff...
One day to go!
www.holeinmyhead.co.uk
Gig & travel photos, writing, artwork & other stuff...
|
Other Threads in the HTML and CSS Forum
- Previous Thread: Dreamweaver templates & html check
- Next Thread: Uploading pictures to website
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
