Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile help me with the simple question

    original text is
    More text

    if user clicks text above, it changes to
    Less text

    if user clicks the changed text, it recovers to original text, and so on...

    but the change will not affect other part of html page.

    thx

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    New York, NY
    Posts
    1,084
    Thanks
    4
    Thanked 19 Times in 19 Posts
    you need an element, let's make a span:

    Code:
    <span>More Text</span>
    Now, you will be operating on this span. So you want an onclick. We'll do this inline since it's simple. Be aware that there are many ways to do the same thing:

    Code:
    <script type="text/javascript">
    function swapText(p_element, p_text)
    {
      if (p_element.altText)
      {  // *** If the element has already has its text swapped ***
         var altText = p_element.altText; // *** Get the alternate text ***
         p_element.altText = p_element.innerHTML; // *** Save the current text ***
         p_element.innerHTML = altText; // *** Display the alternate text ***
      }
      else
      { // *** The element has not yet had its text swapped ***
        p_element.altText = p_element.innerHTML; // *** Save the current text ***
        p_element.innerHTML = p_text; // *** display the text passed into this function ***
      }
    }
    </script>
    
    <span onclick="swapText(this, 'Less Text');">More Text</span>
    Lots of ways to do this. Hope this one helps.

  • #3
    New Coder
    Join Date
    May 2006
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    thx,
    it works perfectly.



  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Much more easier with RegExp:

    Code:
    <script type="text/javascript">
    function swapText(txt){
    txt.data=/More/.test(txt.data)?txt.data.replace(/More/,'Less'):txt.data.replace(/Less/,'More');
    }
    </script>
    ...
    <span onclick="swapText(this.firstChild)">More Text</span>
    Last edited by Kor; 05-06-2006 at 01:46 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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