• Two useful Javascripts in showing and hiding text and adding to a textbox on click
  • Two useful Javascripts in showing and hiding text and adding to a textbox on click
    Written by battye
    Fri Oct 02, 2009 4:10 pm
     


    I haven't dealt with Javascript too much, and when I do I normally just use tutorial examples from other websites. But recently the examples I found online just didn't cut it, and for the first time I actually had to mess with the Javascript myself.

    I am going to explain and give an example of two Javascripts which I think are pretty useful. The first is to make a link that when pressed "shows and hides" content. The second allows the user to click a link, and have some text automatically added to a text box as a result.

    Examples of both of these Javascript codes can be viewed at javascript_examples_oct2009.html along with the full HTML and Javascript source code.

    Showing and hiding text

    Firstly, I want to say that most of this code came from woork.blogspot.com, however the problem with that script was that by default the text was already shown. I altered it so that the text is automatically hidden by default.

    The first step is to paste this code in between the "head" tags of your *.html file:

    Code: Select all
          function showHideLayer(layer)
          {
             var myLayer = document.getElementById(layer).style.display;
          
                if(myLayer=="none")
                {
                   document.getElementById(layer).style.display="block";
                }
          
                else
                {
                   document.getElementById(layer).style.display="none";
                }
          }


    Functions in Javascript work the same way as in other languages such as Java, PHP or C. The function above, showHideLayer has one parameter or import - that being the variable "layer". Whatever value over layer given is defined later on in the HTML code.

    The variable (var) "myLayer" finds the element with an ID matching what was given as "layer", and gets that display mode.

    So in your HTML code, which ever area you want to you show/hide you must assign an ID.

    Code: Select all
          <div id="shtext" style="display: none">
             <p><em>This is the text you want to show and hide.</em></p>
          </div>


    In this example, the ID is "shtext". To create the link to show and hide the text, you need this code:

    Code: Select all
    <a href="#" onclick="javascript:showHideLayer('shtext')">Click here to show/hide the text below.</a>


    Note how "shtext" is used as the argument (which is the parameter in the above Javascript function). If you call your ID something different, you must also make sure you change the name in the link accordingly. The argument given in the link must be the same as the name of the ID you want to show and hide.


    Clicking links and having text automatically added to a text box

    I'm not quite sure how to describe this function, so it might be best to view the example page I linked to above. But essentially, it allows you to have a bunch of hyperlinks, which when clicked add a specified value on to the end of a text box (input box where the type is text, not to be confused with those large "textboxes"). Originally, the code I found simply allowed you to click a link and have the text box take on the specified value - this was no good. I wanted to have it where you could keep clicking a link, and it would keep being added on to the end of the text box.

    Firstly, you add this code into the "head" section of your HTML code:

    Code: Select all
          function addToTextBox(id, box)
          {
             var MyElement = document.getElementById(box);
             var currentElement = document.getElementById(box).value;
          
             MyElement.value = currentElement + id + ",";
          }


    Here there are two parameters, "id" and "box". "id" is simply whatever you want to add on to the end of the text box. "box" is the id given to the text input box.

    The variable "MyElement" defines the text box, while "currentElement" gives the current value of it (shown by the .value on the end). MyElement.value is assigning a new value to the text box, that value being "currentElement" (what is already in it) followed by the new addition (whatever "id" is) with a comma on the end to separate each value. You can easily change or remove the comma by getting rid of the + "," at the end.

    In the HTML body, you need to add an input box somewhere... like this:

    Code: Select all
    <input type="text" id="bbox" name="bbox" />


    See how the id is "bbox".

    Then somewhere else in the body, add the links which when clicked will add to the text box. Like so:

    Code: Select all
    <a href="#" onclick="addToTextBox(1, 'bbox')">#1</a>


    Clicking this would add "1," to the text box. Clicking it again would see the text box read "1,1,". This will continue. This works with multiple links. If you want to add strings (words) to the text box, all you have to do is enclose the "id" argument in single apostraphes:

    Code: Select all
    <a href="#" onclick="addToTextBox('A short sentence', 'bbox')">A short sentence</a>


    Clicking this would add "A short sentence," to the text box.


    In summary, these two Javascripts can both come in handy so I hope this tutorial has helped. Feel free to use these Javascripts on your own site.
     
  • Article search
cron