www.webdeveloper.com
Results 1 to 5 of 5

Thread: How to replace text onClick?

Hybrid View

  1. #1
    Join Date
    Nov 2012
    Posts
    5

    How to replace text onClick?

    Hello! (i'm new here so sorry if this is the wrong section...)

    I've been searching for a script to replace text onClick of an image, however I haven't found quite what I'm looking for. When an image is clicked, I would like text to appear, however if another image is clicked, I would like some different text to appear in the same place, therefore replacing the previous text.

    I hope you understand what I'm wanting.

    Any help is greatly appreciated,
    Thanks in advance.

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    It's easy to do what you want, but the exact code depends on where you want the text to appear on your page. You'll need to show the relevant parts of your HTML before anyone can give you an example of how to do this.
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Nov 2012
    Posts
    5
    Quote Originally Posted by rtrethewey View Post
    It's easy to do what you want, but the exact code depends on where you want the text to appear on your page. You'll need to show the relevant parts of your HTML before anyone can give you an example of how to do this.
    Thank you very much for your reply.

    I'll probably be putting the images into a scrollable box, and then I would like the text to appear at the top of the box, so the Javascript will be contained in there... if that helps.

  4. #4
    Join Date
    Nov 2012
    Posts
    5
    I have managed to get this code, and both images appear along with a div where the text is replaced, however I can't seem to get the two images to show different text...

    Code:
    <div id="theText">Text</div><br> <input type = "image" src="http://www.webdeveloper.com/forum/images/misc/bookmarksite_digg.gif"  onclick = "txtrep()"> <script type = "text/javascript"> function txtrep() { var newtext = "This is Digg."; document.getElementById('theText').innerHTML = newtext; }</script>
    <input type = "image" src="http://www.webdeveloper.com/forum/images/misc/bookmarksite_google.gif"  onclick = "txtrep()"> <script type = "text/javascript"> function txtrep() { var newtext = "This is Google."; document.getElementById('theText').innerHTML = newtext; }</script>

  5. #5
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Right now you have two functions called "txtrep", so the second txtrep() function overwrites the first one. You should give both functions unique names.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles