944,181 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Jun 13th, 2006
0

onClick Events to Change to dynamic text

Expand Post »
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
Reputation Points: 152
Solved Threads: 39
Master Poster
Killer_Typo is offline Offline
778 posts
since Apr 2004
Jun 13th, 2006
0

Re: onClick Events to Change to dynamic text

Are you using the writeln() function? Can you show us all your code?
Administrator
Staff Writer
Reputation Points: 1422
Solved Threads: 163
The Queen of DaniWeb
cscgal is offline Offline
13,646 posts
since Feb 2002
Jun 13th, 2006
1

Re: onClick Events to Change to dynamic text

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.
Team Colleague
Reputation Points: 227
Solved Threads: 37
Made Her Cry
tgreer is offline Offline
1,697 posts
since Dec 2004
Jun 13th, 2006
0

Re: onClick Events to Change to dynamic text

Quote 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.
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!
Reputation Points: 152
Solved Threads: 39
Master Poster
Killer_Typo is offline Offline
778 posts
since Apr 2004
Nov 19th, 2006
0

Re: onClick Events to Change to dynamic text

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.
Last edited by TheAlex; Nov 19th, 2006 at 12:33 pm.
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005
Nov 21st, 2006
0

Re: onClick Events to Change to dynamic text

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!
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.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Nov 21st, 2006
0

Re: onClick Events to Change to dynamic text

Click to Expand / Collapse  Quote 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.
Is this what you want:
[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>&nbsp;<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.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Nov 21st, 2006
0

Re: onClick Events to Change to dynamic text

Click to Expand / Collapse  Quote 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.
i don't need the editor to do what i want, i was just looking for intellisense.

like when programming using visual studio, visual studio will finish the words and names of things when they are recognized.
Reputation Points: 152
Solved Threads: 39
Master Poster
Killer_Typo is offline Offline
778 posts
since Apr 2004
Nov 21st, 2006
0

Re: onClick Events to Change to dynamic text

like when programming using visual studio, visual studio will finish the words and names of things when they are recognized.
Ok, so you want a JavaScript editor with intellisanse.
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.
Reputation Points: 85
Solved Threads: 42
Nearly a Posting Virtuoso
vishesh is offline Offline
1,362 posts
since Oct 2006
Nov 23rd, 2006
0

Re: onClick Events to Change to dynamic text

Click to Expand / Collapse  Quote 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.
Thanks, the text change is perfect. Each image also needs to be different (original and rollover), so I was wondering what the best way to do this is with minimal code?
Reputation Points: 12
Solved Threads: 2
Junior Poster in Training
TheAlex is offline Offline
66 posts
since Feb 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Dreamweaver templates & html check
Next Thread in HTML and CSS Forum Timeline: Uploading pictures to website





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC