www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] accessing elements

  1. #1
    Join Date
    Oct 2011
    Posts
    2

    resolved [RESOLVED] accessing elements

    Hi everybody, I'm new to JavaScript and I'm having a small problem that I can't figure out. I have a the following html which is basically a list with a line to launch a JavaScript function :
    HTML Code:
    <p onClick=test()>test<p>
    <div class="sidebarmenu">
    <ul id="sidebarmenu1">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Folder 1</a>
      <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    
    <li><a href="#">Folder 2</a>
      <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Folder 2.1</a>
        <ul>
        <li><a href="#">Sub Item 2.1.1</a></li>
        <li><a href="#">Sub Item 2.1.2</a></li>
        <li><a href="#">Sub Item 2.1.3</a></li>
        <li><a href="#">Sub Item 2.1.4</a></li>
        </ul>
      </li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
    </ul>
    </div>
    and I have the following JavaScript code I'm using for testing purposes only as I'm new to JavaScript (I'm trying to understand a code I found on the internet) :
    Code:
    var menuids=["sidebarmenu1"]; 
    function test(){
    var ultags=document.getElementById(menuids[0]).getElementsByTagName("ul");
    alert(ultags);
    }
    alert("hello");
    Well, if put in this way, as soon as I launch the page, I get an alert box with "hello" and if I click the test link in html it launches the test function and I get an alert box with the text "[object HTML collection]".

    Well, all this looks fine.

    Now what I did is get the variable assignment to ultags outside the function (trying to make ultags a global variable)
    Code:
    var menuids=["sidebarmenu1"];
    var ultags=document.getElementById(menuids[0]).getElementsByTagName("ul"); 
    function test(){
    alert(ultags);
    }
    alert("hello");
    And when I launch the page nothing happens, I don't get an alert box with the text "hello" and when I click the test link in html, an alert box shows displaying "undefined". What I want to know is why the "hello" alert box isn't showing anymore and why the variable ultags is undefined ?

    However, if I replace
    Code:
    var ultags=document.getElementById(menuids[0]).getElementsByTagName("ul");
    with
    Code:
    var ultags=document.getElementById(menuids[0]);
    the "hello" box shows, and when I click the test link, I get an alert box with the text "null".

    In the other hand, when I replace
    Code:
    var ultags=document.getElementById(menuids[0]).getElementsByTagName("ul");
    with
    Code:
    var ultags=document.getElementsByTagName("ul");
    the "hello box shows, and when I click the test link, I get an alert box with the text "[object HTML collection]".

    So please, what is going on ?

    I also have another question, I used the first code and added a line within the javascript tags to execute the function like this
    Code:
    var menuids=["sidebarmenu1"]; 
    function test(){
    var ultags=document.getElementById(menuids[0]).getElementsByTagName("ul");
    alert(ultags);
    }
    test();
    When I launch the page, the function doesn't launch, why is that ?
    Adding the same line to html displayed it as plain text, why is that ?

  2. #2
    Join Date
    Oct 2011
    Posts
    2
    Well, I finally find out what was going on, I was placing the code in the head section and since the head section loads before the html, there is no way for the code to identify any tag or id if executed in the head section, the only way is to put it in a function and execute this function once the html is loaded.

    Thanks anyway.

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