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
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post

    Document.getElementById problem

    Dear Sir,

    These codes work fine



    Code:
    <li><a href="" onclick="document.getElementById('div2').style.display='none';return false">Hide Div 2</a></li>

    If use these line, then it do not work
    Code:
    <li><a href="" onclick="document.getElementById('div2','div3','div4','div5').style.display='none';return false">Hide Div 2</a></li>

    I used more than one div in it.

    Complete discussin is here
    http://www.webdevforums.com/showthread. ... w-Hide-Div

    Please help

  • #2
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by tqmd1 View Post
    I used more than one div in it.
    ...and exactly that is the problem. getElementById returns one element for one given id. So what you need is a for-loop:

    Code:
    <li><a href="" onclick="hide()">Hide Div 2</a></li>
    ...and the javascript function:

    Code:
    function hide()
    {
       for (var i = 2; i<=5; i++)
       {
         document.getElementById('div'+i).style.display='none';
       }
       return;
    }

  • #3
    Regular Coder
    Join Date
    Oct 2011
    Posts
    116
    Thanks
    19
    Thanked 1 Time in 1 Post
    sir if id is like this

    div1, mydiv,product,about

    Then how to add reference in

    Code:
    document.getElementById('div'+i).style.display='none';

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    You could then define an array:

    Code:
    var ids = ["div1", "mydiv", "product", "about"];
    
    function hide()
    {
       for (var i = 0; i < ids.length; i++)
       {
         document.getElementById(ids[i]).style.display='none';
       }
       return;
    }
    or you write every line:

    Code:
    function hide()
    {
       document.getElementById("divs1").style.display='none';
       document.getElementById("mydiv").style.display='none';
       (....)
       return;
    }

    or you find another possibility to select your div elements. Maybe you want to hide all the div elements of one specific parent, then you could use:

    Code:
    var divs = parent.children;
    
    function hide()
    {
       for (var i = 0; i < divs.length; i++)
       {
         divs[i].style.display='none';
       }
       return;
    }
    you could also check out the functions "querySelector" and "querySelectorAll", which let you select Elements with a CSS query string (like "#id > div"). In many cases it is easier to create a clean and logic HTML structure, which let you use Selectors like these, than select every single Element by its ID (even IDselection might be faster). But for the beginning the array-method should definitly do it.


  •  

    Posting Permissions

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