How to Change the DIV Visibility With JavaScript

Save

JavaScript is a client-side scripting language that can be used to build dynamic web pages that respond to user actions. For example, users interact with web pages by clicking buttons, opening pages or by moving their mouse cursor over the items on the web page. These interactions trigger events such as "onclick," "onload" or "onmouseover" that can, in turn, trigger JavaScript functions. Functions can use built-in JavaScript methods, such as "getElementById," to change the style visibility of web page elements, such as text placed in "DIV" tags.

Things You'll Need

  • Text Editor
  • Web browser with JavaScript enabled
  • Open a text editor and create a new file named divVisibility.html. Add HTML tags to the file that include an open "<html>" tag, an open "<head>" tag, a close "</head>" tag, an open "<body>" tag, a close "</body>" tag, and a close "</html>" tag.

    <html>

    <head></head>

    <body></body>

    </html>

  • Add a "<script>" tag between the "<head>" and the "</head>" tags, set the <script> tag's type attribute to "text/javascript" and close the "</script>" tag.

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body></body>

    </html>

  • Add a function named "getStyle" between the "<script>" and "</script>" tags. This function takes one argument: a variable named "visibility". Add an open curly brace ("{") and a close curly brace ("}") after the function declaration to indicate where to place the "getStyle" function code.

    <html>

    <head>

    <script type="text/javascript">

    function getStyle(visibility)

    {

    }

    </script>

    </head>

    <body></body>

    </html>

  • Add a command between the "getStyle" function's curly braces that uses the "getElementById" JavaScript command. This command sets the "style.visibility" attribute of a <div> with the id "myField" to the value of the "visibility" variable argument.

    <html>

    <head>

    <script type="text/javascript">

    function getStyle(visibility)

    {

    document.getElementById("myField").style.visibility = visibility;

    }

    </script>

    </head>

    <body></body>

    </html>

  • Add a "<div>" tag between the file's "<body>" and "</body>" tags and give the tag the id "myField". Add the text "Hide and Show DIV" after the "<div>" tag and close the "</div>" tag.

    <html>

    <head>

    <script type="text/javascript">

    function getStyle(visibility)

    {

    document.getElementById("myField").style.visibility = visibility;

    }

    </script>

    </head>

    <body>

    <div id="myField">Hide and Show DIV</div>

    </body>

    </html>

  • Add a button after the close "</div>" tag. Assign an "onClick()" JavaScript event to the button that calls the "getStyle()" function with the argument "visible". Assign the text "Make the DIV tag visible" to the button and close the "</button>" tag.

    <html>

    <head>

    <script type="text/javascript">

    function getStyle(visibility)

    {

    document.getElementById("myField").style.visibility = visibility;

    }

    </script>

    </head>

    <body>

    <div id="myField">Hide and Show DIV</div>

    <button onclick=getStyle("visible")>Make the DIV tag visible</button>

    </body>

    </html>

  • Add a second button tag to the file. Assign an "onClick()" JavaScript event to the button that calls the "getStyle" function with the argument "hidden". Assign the text "Make the DIV tag invisible" to the button and close the "</button>" tag. Save and close divVisibility.html.

    <html>

    <head>

    <script type="text/javascript">

    function getStyle(visibility)

    {

    document.getElementById("myField").style.visibility = visibility;

    }

    </script>

    </head>

    <body>

    <div id="myField">Hide and Show DIV</div>

    <button onclick=getStyle("visible")>Make the DIV tag visible</button>

    <button onclick=getStyle("hidden")>Make the DIV tag invisible</button>

    </body>

    </html>

  • Open divVisibility in a web browser. Click the "Make the DIV tag visible" button to show the text between the "myFIeld" "<div>" and "</div>" tags. Click the "Make the DIV tag invisible button to hide the text between the "myField" "<div>" and "</div>" tags.

Tips & Warnings

  • Text displayed in HTML DIV tags can be hidden or displayed using CSS styles created using style sheets.
  • It is a best practice to verify dynamic code, events and methods in different web browsers to ensure that the code works consistently.
  • The "<DIV>" HTML tag can take advantage of many CSS styles that provide more compelling user interfaces.
  • Consider using a "return" at the end of any function that does not return a value to ensure the function works as expected.

References

  • Photo Credit Jason Reed/Ryan McVay/Photodisc/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!