onClick Events to Change to dynamic text

Question

Killer_Typo 82 Master Poster

18 Years Ago

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

<a onClick="funciton to change text">Webby Stuffy</a>

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 :P

web-design

5 Contributors
14 Replies
303 Views
5 Months Discussion Span
Latest Post 18 Years Ago Latest Post by TheAlex

Dani 4,329 The Queen of DaniWeb

18 Years Ago

Are you using the writeln() function? Can you show us all your code?

tgreer 189 Made Her Cry

18 Years Ago

To change the innerHTML of an element, you need to use the (wait for it) "innerHTML" property of that element.

<html>
<body>

<a href="#" onclick="this.innerHTML='<strong>You changed me</strong>';"><em>Change from emphasized to strong.</em></a>

</body>
</html>

This also avoids using the out-of-date document.write() or document.writeLn() methods.

Killer_Typo commented: w00t, worked out perfectly. thanks. +3

TheAlex 1 Junior Poster in Training

18 Years Ago

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.

GreenDay2001

18 Years Ago

sorry i actually updated the script without checking it, might be some wrong things have crept in. I am in hurry now and will check it later after 7pm IST.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Killer_Typo 82 Master Poster · Answer 1 · 2006-06-14T07:34:36+00:00

To change the innerHTML of an element, you need to use the (wait for it) "innerHTML" property of that element.
<html>
<body>
 
<a href="#" onclick="this.innerHTML='<strong>You changed me</strong>';"><em>Change from emphasized to strong.</em></a>
 
</body>
</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! :)

GreenDay2001 · Answer 2 · 2006-11-21T13:16:17+00:00

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.

GreenDay2001 · Answer 3 · 2006-11-21T13:25:14+00:00

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:

<!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>

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.

Killer_Typo 82 Master Poster · Answer 4 · 2006-11-21T14:14:23+00:00

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.

GreenDay2001 · Answer 5 · 2006-11-21T16:06:25+00:00

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.

TheAlex 1 Junior Poster in Training · Answer 6 · 2006-11-23T18:15:38+00:00

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?

GreenDay2001 · Answer 7 · 2006-11-23T20:31:39+00:00

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?

same as my previous approach, just add another argument, for the rollover picture.

GreenDay2001 · Answer 8 · 2006-11-23T20:32:53+00:00

oh here's the code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>change date</title>
<script type="text/javascript">
<!--

function showdate(logo, date, defPic) // defPic for rollover
{
nSRC = logo.src;                  // stores default picture URL
logo.src=defPic;                 // changes the url of image
document.getElementById("date").style.display="inline";
document.getElementById("date").innerHTML=date;
logo.onmouseout=function()
{
logo.src=nSRC;                    // set the URL back to it
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','boy.jpg')" /></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>

TheAlex 1 Junior Poster in Training · Answer 9 · 2006-11-23T22:57:02+00:00

I couldn't get the above to work so copied your code exactly with the relevant bits changed (as below) - the first image works but nothing happens when I rollover the second image. This is the first time I've needed JavaScript for a few years and it's made me realise I don't know much about it anymore (not that I did in the first place!)...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>change date</title>
<script type="text/javascript">
<!--

function showdate(logo, date, defPic) // defPic for rollover
{
nSRC = logo.src;                  // stores default picture URL
logo.src=defPic;                 // changes the url of image
document.getElementById("date").style.display="inline";
document.getElementById("date").innerHTML=date;
logo.onmouseout=function()
{
logo.src=nSRC;                    // set the URL back to it
document.getElementById("date").style.display="none";
document.getElementById("date").innerHTML="none";
}
}

-->
</script>
</head>
<body>
<table border="0">

<tr>
<td>
<a href="http://www.">
<img src="image_red.gif" onMouseOver="showdate(this, '23rd Nov, 2006','image_red_over.gif')" /></a>

<a href="http://www.">
<img src="image.gif" onMouseOver="showdate(this, '26th Nov, 2006,'image_over.gif')" /></a>
</td>
</tr>

<tr>
<td>&nbsp;<div id="date"></div>

</td>
</tr>
</table>
</body>
</html>

TheAlex 1 Junior Poster in Training · Answer 10 · 2006-11-24T15:25:52+00:00

No problemo, after going through it with a tooth-comb about five times I've fixed it. As simple as a missed apostrophe! Thanks for your help. :)

Actually, that's not my problem in the original code, but now the above works I should be able to figure it out...